5

I had the intention to use one template across several views having different controllers.

But now I realize that I cannot just write universal binding in templates because values will be put inside $scope.concreteControllerName.

Angular docs for ngInclude say that

This directive creates new scope.

I could use ng-init directive and pass controller instance to template's scope:

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

or even better 

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

and then write {{controller.boundvalue}} in template.

That is a working solution, I guess.

And here I'd like to know whether other better approaches exist and if not, should templates always be used with some notion of passed model to abstract away from parent scope?

Pavel Voronin
  • 13,503
  • 7
  • 71
  • 137
  • 1
    Take a look at this [SO question](http://stackoverflow.com/questions/13422966/how-to-specify-model-to-a-nginclude-directive-in-angularjs/20639139#20639139) - several answers there are great. – New Dev Oct 17 '14 at 15:28

1 Answers1

3

Use John Papa's controllerAs View Syntax and controllerAs with vm. You specify different controllers in the ng-include directives but use the same src html template. The common vm variable name is used in the template.

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>

Here is a full working version: Full Working Code in Plunker

James Lawruk
  • 30,112
  • 19
  • 130
  • 137
  • It would be nice, in your Plunker, to show how you'd refer to the parent controller from the child controller (without using $scope). – Gabriel Kohen Feb 06 '17 at 12:40