Я пытаюсь создать какой-то магазин, где HTML выглядит следующим образом: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, я хочу изменить цвет продукта. Я сейчас с этим боюсь, и небольшая помощь будет потрясающей.
Я переписал этот код здесь, потому что я сделал его короче и по-английски. Я уверен, что есть некоторые опечатки в коде, но не беспокойтесь о них. Все шаблоны работают, и страница выглядит правильно с использованием исходного кода.