Каковы рекомендации по использованию ngInclude с синтаксисом ControllerAs?

У меня было намерение использовать один шаблон в нескольких представлениях с разными контроллерами.

Но теперь я понимаю, что я не могу просто написать универсальную привязку в шаблонах, потому что значения будут помещаться внутри $scope.concreteControllerName.

Документы Angular для ngInclude говорят, что

Эта директива создает новую область видимости.

Я мог бы использовать директиву ng-init и передать экземпляр контроллера в область действия шаблона:

<ng-include src="..." ng-init="controller=concreteControllerName"/>

или даже лучше

<ng-include src="..." ng-init="model=getModelForTemplate()"/>

а затем напишите {{controller.boundvalue}} в шаблоне.

Думаю, это рабочее решение.

И здесь я хотел бы знать, существуют ли другие лучшие подходы, и если нет, следует ли всегда использовать шаблоны с некоторым понятием переданной модели, чтобы абстрагироваться от родительской области?


angularjs angularjs-ng-include
person Pavel Voronin    schedule 17.10.2014    source источник
comment
Взгляните на этот SO question - несколько ответов там отличные.   -  person New Dev    schedule 17.10.2014

Ответы (1)


arrow_upward
3
arrow_downward

Используйте controllerAs View Syntax и controllerAs с vm. Вы указываете разные контроллеры в директивах ng-include, но используете один и тот же шаблон src html. В шаблоне используется общее имя переменной vm.

index.html

<div ng-include ng-controller="controllerOne as vm" src="'same.html'"></div>
<div ng-include ng-controller="controllerTwo as vm" src="'same.html'"></div>
<div ng-include ng-controller="controllerThree as vm" src="'same.html'"></div>

controllerOne.js

function controllerOne() {
    var vm = this;
    vm.name = 'Controller One!';

sharedTemplate.html

<div>{{vm.name}}</div>

Вот полная рабочая версия: Полный рабочий код в Plunker

person James Lawruk    schedule 08.12.2014
comment
Было бы неплохо в вашем плункере показать, как вы будете обращаться к родительскому контроллеру из дочернего контроллера (без использования $scope). - person Gabriel Kohen; 06.02.2017