0
：この練習のAngularjsネストされたカスタムディレクティブ
<body>
<main-wrapper>
<head>
</head>
<wrapper-one>
<products>
</products>
</wrapper-one>
<wrapper-two>
<log-in>
</log-in>
</wrapper-two>
</main-wrapper>
</body>
ポイントは、私はすべてのコントローラを使用していないということです。ちょうど指令。これらの指令を互いに通信させたいのです。だから、私がログインしたときに、それぞれの製品を「緑色」から「青色」に変更したいとしましょう。ここで
はディレクティブです：
app.directive("mainWrapper", function() {
return {
transclude:true,
restrict:'E',
template: '<div class="container" ng-transclude></div>',
controller : function($scope){
this.addItem = function(val){
console.log(val);
}
}
};
});
app.directive("wrapperOne", function() {
return {
restrict:'E',
transclude:true,
require : '^mainWrapper',
template: '<div class="col-sm-8" ng-transclude></div>',
controller : function($scope){
this.addItem = function(val){
console.log(val);
}
}
};
});
app.directive("wrapperTwo", function() {
return {
restrict:'E',
require : '^wrapperOne',
templateUrl: 'view/products.html',
controller: function($scope, $element, $attrs) {
$scope.products =
[{product : 'car',color : 'green'}];
}
};
});
app.directive("logIn", function() {
return {
restrict:'E',
require : ['^wrapperTwo', '?products'],
scope: true,
link:function($scope,elem,attr,outerctrl){
},
templateUrl: 'view/login.html',
controller: function($scope) {
//login -> $scope.loggedIn = true
//logout -> $scope.loggedIn = false
}
};
});
私はこの質問を短くしようとしたので、私は、このうちいくつかのコードを残しました。だから、ユーザーがログインしスコープのloggedInがtrueの場合、私は製品の色を変更したい。私はこれとしばらく苦労してきました。
私はこれを短くして英語にしたので、このコードをここに改めて書きました。私はコードにいくつかのタイプミスがあると確信していますが、それらについて心配しないでください。すべてのテンプレートが機能しており、ページは元のコードで正しく表示されます。