0

How can I add, in isolate scope, two way data binding attr in case of directive including in another directive?? index.html

<event event-width width="width"></event>

directive.js

ll.directive('event',function() {
return {
    restrict: 'E',
    scope:{              //error !!! Error: [$compile:multidir] Multiple directives [event, eventWidth] asking for new/isolated scope on
        event: '='       
    },
    templateUrl: function (attr, elem) {
        return 'app/template/' + elem.template;
    },
    link:function(scope,elem,attr){
        console.log(scope.width)
    }
}
});

ll.directive('eventWidth',function() {
    return {
        restrict: 'A',
        scope:{
            width: '='
        },
        link:function(scope,elem,attr){

        }
    }
});

Compiler throw this error: Error: [$compile:multidir] Multiple directives [event, eventWidth] asking for new/isolated scope on

How can I read and set the width property declared outer of event scope ?? An elegant way, please ;)

claudio
  • 41
  • 3
  • Why do you need two directives that both have two-way binding on the same element? The reverse binding (where the directive updates the outer scope) is typically used with `ng-models`. These are created as part of a template, and typically, only a single directive applies a template. – New Dev Mar 02 '15 at 22:47
  • because I need to calculate the with of the outer element tag – claudio Mar 02 '15 at 22:52
  • I need to know the width of event and assign the related with to ul element – claudio Mar 02 '15 at 22:54

2 Answers2

1

Angular can nest directives, and has functionality to handle it. But that is not what you are doing. You are trying to add 2 directives that both have an isolated scope on to the same element, which obviously it does not like.

You are getting this error because both of them have an isolated scope, remove the isolated scope from one of them and it will work

Read this post about scopes in directives http://tech.blinemedical.com/sharing-data-between-child-and-parent-directives-and-scopes-in-angularjs/

You can imagine how that would confuse it.

Alternatively you could actually nest them, like this. There are many solutions for this

<event>
  <event-width width='500'></event-width>
</event>

So now you can treat event-width as a child directive of event. In the directive you can add this...

ll.directive('eventWidth',function() {
  return {
    restrict: 'A',
    require: '^event',
    scope:{
        width: '='
    },
    link:function(scope,elem,attr, eventCtrl){

    }
  }
});

adding require: '^event' will then give you access to that directives controller. You can pass that into the child directives controller as I have shown as 'eventCtrl'. Then anything in the parent controller that uses 'this' can be used from the child.

This can get much more complicated and robust, but I would recommend looking into require on directives and child directives.

This post could help How to require a controller in an angularjs directive

Community
  • 1
  • 1
ribsies
  • 1,218
  • 2
  • 10
  • 16
  • As a note, for your case, you should probably just make it one directive. You shouldn't do this unless you have to. Not because it's bad, but because it's much easier to deal with. – ribsies Mar 02 '15 at 22:32
  • tnks for the answer.. I have do an error in title, now updated.. now I need one day for understand the answer's :) – claudio Mar 02 '15 at 22:42
  • It's what I was looking for .. thanks a lot ; ) you have answered my question ... I underestimated the property require .. I assumed another meaning. thanks thanks thanks ;) – claudio Mar 02 '15 at 23:18
-1

May I ask why you are wanting to nest your directives? Usually common practice would be to have directives folder, and then create each directive as its own js document within the directives folder. Because each directive should perform one particular task it carries out. Then you will reference those directives in the DOM. Nesting directives takes away modularity of your code.

It looks like the error code you are getting seems to be related to having this nested directive. By nature directives should be very simple, and really you should only create a directive if you forsee this task being one that is reusable and used often. (Like a directive for a shopping cart of a nav bar, etc)

I would try rethinking the way you are hoping to accomplish this task.

James
  • 624
  • 4
  • 13
  • There are definitely use cases for nesting directives, and it doesn't take away modulality. For example, `ng-model` can be nested under `form` directive. Similarly, `ng-model-options` requires `ng-model`. I also don't understand at all what you mean by "folder" – New Dev Mar 02 '15 at 22:11
  • The OP doesn't have nested directives yet and you neither provided a solution nor answered the question. Your experience with custom directives seems to revolve around "element directives" using templates. That, however, is just one use case and your examples sound more like a misuse to me (but that's an opinion). Directives encapsulate any logic(!) that involves the DOM. Reusability is important but it's not the raison d´être of a directive. – a better oliver Mar 03 '15 at 17:36