Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 1.2 no longer allows multiple isolated scope directives on same element?

I have some code in an Angular project that use two separate directives with isolated scope. They do not need to share scope, simply exist on the same element. They both alter the DOM in slightly different ways, and importantly bind to values passed as arguments.

This worked in 1.0, however Angular 1.2 now generates an error when attempting to do this

Multiple directives asking for new/isolated scope

Based on the projects git history appears Angular 1.2 changes behaviour to keep two isolated directives on the same element separate. This is a good thing, and it works correctly when putting two 'Attribute' directives on the same element.

i.e.

<div my:directive="myDirectiveData" my:other-directive="myOtherDirectiveData" />

works as you would expect.

however

<my:directive my:directive-data="myDirectiveData" my:other-directive="myOtherDirectiveData" />

Throws the above error. (Multiple directives asking for new/isolated scope)

In this scenario I would have expected each directive to still exist in parallel with their own unshared isolated scope.

Is this still possible in Angular 1.2?

like image 865
James Davies Avatar asked Dec 04 '13 04:12

James Davies


People also ask

Can we use multiple directives in angular?

As with components, you can add multiple directive property bindings to a host element.

What is isolated scope in AngularJS?

Isolated scope directive is a scope that does not inherit from the parent and exist on its own. Scenario: Lets create a very simple directive which will show the object from the parent controller.

What is attrs in AngularJS?

Using attrs you are able to access the attributes defined in your html tag like <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true">

What is restrict option in directive?

Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option. The restrict option is typically set to: 'A' - only matches attribute name. 'E' - only matches element name.


2 Answers

Summary of what happens when multiple directives are defined on the same element:

  Scenario  directive #1   directive #2   Result
     1      no new scope   no new scope   Both directives use the controller's scope.
                                          (This should be obvious.)
     2      new scope      new scope      Both directives share one new child scope.
     3      new scope      no new scope   Both directives share one new child scope.
                                          Why does dir #2 use the child scope?
                                          This seems odd to me.
     4      isolate scope  no new scope   Angular v1.0: both directives share the
                                          isolate scope.
                                          Angular v1.2+: dir #1 uses the isolate scope,
                                          dir #2 uses the controller's scope.

Note that the following scenarios are not allowed (Angular throws an error):

  Scenario  directive #1   directive #2
     5      isolate scope  new scope
     6      isolate scope  isolate scope
like image 175
Mark Rajcok Avatar answered Nov 15 '22 08:11

Mark Rajcok


You can't have multiple directives asking for isolate scope on the same element. I think your problem may be caused by this unresolved issue in angularjs.

like image 38
Georgi Yordanov Avatar answered Nov 15 '22 07:11

Georgi Yordanov