Sharing Top Content from the Angular-sphere.

[SOLVED] AngularJS passing data from a directive controller to another- Angular.js Recipes

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

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

    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.

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.


@angular_recipe: AngularJS passing data from a directive controller to another #Angular #AngularJS

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

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

channelselect.html

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.

directive’s scope.

directive’s definition, you can do something like the following:

tag to set up a bi-directional binding to its parent scope.

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

There is currently no discussion for this recipe.

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] AngularJS passing data from a directive controller to another- Angular.js Recipes

Comments are closed, but trackbacks and pingbacks are open.