CODEWITHSUNDEEP
javascriptangularjs
Robert Koritnik
Robert Koritnik

Reputation: 105029

Multiple ng-controller directives using "controller as x" on the same element

  1. Why isn't it possible in Angular to put two ng-controller directives on the same element and
  2. Which are the possible mitigation scenarios for this problem - like custom directives or HTML element nesting with single ng-controller directives to name a couple, but there may be others as well

Something like this:

<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 on the same element.

Upvotes: 3

Views: 2677

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

This can't be possible since ng-controller creates isolated scope for the current element. So this is not possible. So there can't be two isolated scope on a same 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 its not valid to have same name attribute in any html tag.

Upvotes: 5

Related Questions