Clever Geek Handbook

Multiple ng-controller directives using "controller as x" on one element

  • Why is it not possible in Angular to set two directives ng-controller

    on the same element and
  • What are the possible scenarios for mitigating this problem - for example, custom directives or HTML element nested with single directives ng-controller

    to name a pair, but there could be others.

Something like that:

<div ng-controller="ControllerOne as c1" ng-controller="ControllerTwo as c2">
    {{ c1.value }}, {{ c2.value }}
</div>

Here's a JSFiddle example that sets two controllers to the same element.

+3


source to share


1 answer


This is not possible because it ng-controller

creates an isolated area for the current item. So this is not possible. Thus, there cannot be two isolated objects on one element.

You need to change your code to:



<div ng-controller="ControllerOne as c1">
    <div ng-controller="ControllerTwo as c2">
        {{ c1.value }}, {{ c2.value }}
    </div>
</div>

Also, it is not valid to have the same name attribute in any html tag.

+5


source






More articles:


All Articles