AngularJS passing data from a directive controller to another

Question

I have a form, which with you can edit an image gallery, of course I've created a directive for it, like this:

galleryEdit.html

<div>
  <form ng-submit="submit()">
    <label>Headline:</label>
    <input type="text" ng-model="gallery.headline" placeholder="Enter headline here" value=""/>

    <label>channels:</label>
    <channelselect></channelselect>

    <input type="submit"/>
  </form>
</div>

So, galleryEdit has another directive channelSelect, which with you can select a channel (not only for galleries)

channelselect.html

<div>
  <select>
      <option value="{{channel.shortCode}}">{{channel.name}}</option>
  </select>
</div>

GalleryEdit has a controller, that passes data (called "gallery") for its directive, so its $scope has $scope.gallery property, which contains channel id: $scope.gallery.channel. Since channelselect has different controller, that has its scope, this gallery.channel cannot be seen from that scope. Is there any way to pass data from gallery to channel controller/directive ? Using $scope.$parent is not a solution, since channelSelect should not know anything where the data is coming from.

Just because both directives have a controller does not mean that they have separate scopes. The scope attribute on the directive definition object determines if a new scope (or not) is created, and whether a new scope is an isolate scope or not. So one possible solution is to not create any new scopes, then both directives would share the same scope, and hence have access to all the same $scope properties/data. — Mark Rajcok
– Mark Rajcok, Commented Feb 4, 2013 at 16:49

Scott Baldwin · Accepted Answer · 2013-02-04 14:25:58Z

6

You can set up bi-directional binding between your galleryEdit directive's scope and your channelselect directive's scope.

In your channelselect directive's definition, you can do something like the following:

directive('channelselect', [function () {
    ...
    scope: {channel: '='}
    ...
}])

This will create an isolated scope for your channelselect directive, and will let you use the channel attribute on your <channelselect> tag to set up a bi-directional binding to its parent scope.

So now you can do this in galleryEdit.html:

<channelselect channel="gallery.channel"></channelselect>

Now channelselect's $scope.channel will be bound to galleryEdit's $scope.gallery.channel.

See the Directive Definition Object section of AngularJS's Directives guide for more details on isolated scopes.

edited Feb 4, 2013 at 14:25

answered Feb 4, 2013 at 14:19

Scott Baldwin

4223 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS passing data from a directive controller to another

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related