Значение переменной как имя директивы/контроллера внутри шаблона (с $compile/$interpolate)?

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

Скажем, у меня есть директивный виджет, который имеет шаблон с именем widget.html, который выглядит так:

<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
    <div class="navBar">
        <div ng-include="widget.type + '-t.html'"></div>
    <i class="fa fa-close"></i>
    <hr>
    </div>
    <div ng-include="widget.type + '-f.html'"></div>
</div>

Теперь widget.type не оценивается в первой строке. Он отлично работает для ng-include. Скажем, значение widget.type равно weather. Затем первая строка должна быть интерполирована первой, чтобы она выглядела как (не имеет значения, интерполируется ли атрибут класса, widget.type-attr или ng-controller)

<div class="widget" weather>

и затем компилируется для включения директивы погоды.

Как я могу получить интерполяцию widget.type в шаблоне?

Невозможно использовать ng-include для загрузки директивы. Мне нужно использовать один общий шаблон для виджета и я хочу добавить/переопределить/расширить базовую директиву с помощью дополнительных функций/переменных.

Если это не способ добиться этого, есть ли способ расширить директиву ООП-способом?

См. планкр


angularjs angularjs-directive angular-template
person Patrick    schedule 18.12.2014    source источник
comment
Каков вариант использования атрибута {{widget.type}}?   -  person Rahil Wazir    schedule 18.12.2014
comment
@RahilWazir widget.type должен содержать имя директивы. Он должен содержать директиву add. Буду редактировать с примером.   -  person Patrick    schedule 18.12.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете размещать выражения интерполяции только в текстовых узлах и значениях атрибутов. AngularJS оценивает ваш шаблон, сначала превращая его в DOM, а затем вызывая компиляцию директив и т. д. Если вы попытаетесь поместить {{...}} вместо атрибута name, вы просто получите испорченный DOM.

Если вам действительно нужно заменить всю директиву на основе значения переменной $scope, вам нужно создайте директиву для применения других директив и проделайте тяжелую работу с $compile (вам придется полностью перекомпилировать шаблон каждый раз при изменении значения). Я бы порекомендовал попробовать найти другие проекты, решающие вашу ситуацию, прежде чем пытаться это сделать.

Для настройки вашего шаблона на основе атрибутов элемента см. этот ответ.

person hon2a    schedule 18.12.2014
comment
Спасибо за это. Я попытался добавить link: { pre: function(scope, element, attrs){ attrs.$set('ngController', scope.widget.type + 'Ctrl'); } } в свою директиву, но контроллер не подключился, а затем (см. plunkr) . Если я попытаюсь добавить $compile(element)(scope) после этого, странные вещи произойдут во второй раз, когда я добавлю виджет. Поскольку вы рекомендуете другой подход: у вас есть идея, как я могу динамически добавлять поведение в базовую директиву, имея общий шаблон? - person Patrick; 18.12.2014
comment
Это действительно зависит от того, чего вы пытаетесь достичь. Выполнение только $attrs.$set('ngController', ...) не сработает, потому что Angular создает карту директив, которые нужно скомпилировать задолго до того, как это произойдет. Использование $compile не так просто. (Читайте документацию.) Вы должны где-то хранить мертвый шаблон, вручную скомпилировать его и вставить в DOM. Использование $compile в уже связанном живом DOM, очевидно, приведет к катастрофе. - person hon2a; 18.12.2014