У меня есть три директивы:угловая директива включения и наследование
aiOutter, aiMiddle и aiInner.
app.directive('aiOutter', function() {
return {
restrict: 'A',
scope: {
data: '='
},
template: '<div>Outter: {{data}}</div>',
transclude: true,
link: function(scope, elem, attrs) {
console.log('outter recognized');
return console.log('outter data:', scope.data);
}
};
}).directive('aiMiddle', function() {
return {
restrict: 'A',
scope: {
data: '='
},
template: '<div>Middle: {{data}}</div>',
transclude: true,
link: function(scope, elem, attrs) {
console.log('middle recognized');
return console.log('middle data:', scope.data);
}
};
}).directive('aiInner', function() {
return {
restrict: 'A',
scope: {
data: '='
},
template: '<div>Inner: {{data}}</div>',
link: function(scope, elem, attrs) {
console.log('inner recognized');
console.log('inner data:', scope.data);
scope.changeData = function(newData) {
scope.data = newData;
}
}
};
});
Моя разметка выглядит следующим образом:
<body ng-controller="MainCtrl">
<div ai-outter data="name">
<div ai-middle data="data">
<div ai-inner data="data">
</div>
</div>
</div>
Только Outter самая директива, кажется, быть подобран. Что мне нужно сделать, чтобы иметь возможность использовать этот шаблон наследования, а также иметь возможность заполнять внутреннюю директиву переводимой разметкой?
Plunker: http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV
EDIT Разъяснение
Я отредактировал мой разметки а, как это было предложено PascalPrecht (обновленный plunker здесь: http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV)
<body ng-controller="MainCtrl">
<div ai-outter data="name" ng-transclude>
<div ai-middle data="name" ng-transclude>
<div ai-inner data="name" ng-transclude>
<h1> Hello, {{name}}</h1>
<button ng-click="name = 'bob'">Click me</button>
</div>
</div>
</div>
Однако, я думаю, что я м, столкнувшись с проблемой обзора. Когда я нажимаю кнопку, модель {{name}} должна полностью привязываться, не так ли? В настоящее время обновляется только внутренняя область.
Я думаю, что я смущен тем, что касается директив.
При указании сферы: {}, вы задаете изолированную область видимости. Наследование наследования отсутствует. Для наследования области используйте scope: true. – pixelbits