Директива в шаблоне другой директивы

0

Я пытаюсь добавить настраиваемую директиву в шаблон другой директивы клиента, но шаблон не отображается. Использование ниже кода. Что я делаю не так?

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>

Ссылка JS Fiddle

Теги:
angularjs-directive

1 ответ

3
Лучший ответ

Поскольку вы 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) {

        }
    }
});

скрипка

Ещё вопросы

Сообщество Overcoder
Наверх
Меню