icw82
@icw82
Веб-разработчик

Как заставить работать контроллер из шаблона, вставленного директивой?

Имеется сферическая в вакууме директива:
angular
    .module('app')
    .directive('block', function () {
        return {
            replace: true,
            restrict: 'A',
            templateUrl: function (element, attr) {
                return 'blocks/' + attr.block + '.html';
            }
        };
    });

Основной шаблон:
<!-- … -->
<div block="example"></div>
<!-- … -->

Шаблон (blocks/example.html):
<div ng-controller="ExampleCtrl as example">
    <p ng-bind="example.text"></p>
</div>

Контроллер:
angular
    .module('app')
    .controller('ExampleCtrl', ExampleCtrl);
function ExampleCtrl() {
    this.text = 'Текст'
}

Суть
Шаблон удачно вставляется, но почему-то игнорирует атрибут ng-controller="ExampleCtrl as example" в первом элементе шаблона, из-за чего <p ng-bind="example.text"></p> остаётся пустой.

Если создать директиву с replace: false, то контроллер заработает, но обёртка останется.
Или если в шаблоне атрибут сместить на уровень ниже, то контроллер тоже заработает:
<div>
    <div ng-controller="ExampleCtrl as example">
        <p ng-bind="example.text"></p>
    </div>
</div>

Это связано с тем, что директива создаёт свою область видимости?
Есть ли какой-нибудь простой способ заставить директиву использовать область видимости контроллера без создания лишних обёрток?
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 2
miraage
@miraage
Старый прогер
Для этих целей есть ng-include.
Ответ написан
@napa3um
stackoverflow.com/questions/22575424/angularjs-ng-...

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

angular
    .module('app')
    .directive('block', function () {
        return {
            replace: true,
            restrict: 'A',
            templateUrl: function (element, attr) {
                return 'blocks/' + attr.block + '.html';
            },
            controller: 'ExampleCtrl',
            controllerAs: 'example',
            bindToController: true
        };
    });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы