Я пытаюсь добавить настраиваемую директиву в шаблон другой директивы клиента, но шаблон не отображается. Использование ниже кода. Что я делаю не так?
app.js
var app = angular.module('myApp', []);
app.directive('container', function () {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<div my-dir-one></div>',
link: function (scope, elm) {
}
}
});
app.directive('myDirOne', function () {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<div>This is directive one.</div>'
}
});
HTML:
<div container></div>
Поскольку вы replace: true
в директиве контейнера, конечным результатом будет HTML:
<div container my-dir-one></div>
Проблема в том, что обе эти директивы требуют изолированных областей, и вы не можете этого сделать (у вас также не может быть более одной директивы, требующей шаблона). Если вы откроете консоль в инструментах dev, вы увидите:
Ошибка: [$ compile: multidir] Несколько директив [container, myDirOne], запрашивающих новую/выделенную область действия: http://errors.angularjs.org/1.2.1/ $ compile/multidir? P0 = container & p1 = myDirOn... 2Fisolated %20scope & р3 =% 3Cdiv %20My-Dir-один% 3D% 22% 22 %20container% 3D% 22% 22% 3E
Если вы удалите replace: true
для директивы контейнера, она будет работать:
app.directive('container', function () {
return {
restrict: 'A',
scope: {},
template: '<div my-dir-one></div>',
link: function (scope, elm) {
}
}
});