AngularJs How to pass the complex object in directives

Question

iI have this directive :

amDirective.directive('directiveList', function() { return { restrict: 'A', scope: { 'event': '&onEvent' }, transclude: true, templateUrl: '' }; });

and in my page html

<div data-dy-directive-list data-elements="elements" on-event="listItemClicked(item)"></div>

and in my directive- template html

 <table class="table" data-ng-show="elements!=null && elements.length>0"> <tr data-ng-repeat="element in elements"> <td><span data-ng-click="event(element)">{{element.title}}</span></td> </tr> <tr></tr> </table>

How can I pass in my directive the complex object "item"?

Ilan Frumer · Accepted Answer · 2014-01-08 15:13:20Z

angular directives use '&' to bind to parent scope expressions. It means that your directive would evaluate it when an event occurs inside the directive.

Example

app.directive('directiveList', function() { return { restrict: 'A', scope: { 'event': '&onEvent' }, link: function(scope){ var myItem = {} scope.event = function(item) { element.bind('click', function(){ scope.event({item: myItem}) }) } }; });

If you want to raise an event from the parent scope and let your directive know you should use "="

Example

app.directive('directiveList', function() { return { restrict: 'A', scope: { 'event': '=onEvent' }, link: function(scope){ scope.event = function(item) { // manipulate item return "something"; } } }; });

Community · Accepted Answer · 2017-05-23 10:33:22Z

From your directive (either controller or link function) you would call: scope.event({item: item}), passing a named map from argument names to values to provide to the callback.

Example:

amDirective.directive('directiveList', function() { return { restrict: 'A', scope: { 'event': '&onEvent' }, transclude: true, templateUrl: '', link: function(scope, element, attrs) { element.bind('click', function() { scope.event({ item: { hello: 'world', x: 3 } }); }); } }; });

Usage:

<a directive-list on-event="myHandler(item)">Click Me<a>

Here's an example plnkr.

See: Can an angular directive pass arguments to functions in expressions specified in the directive's attributes?

Collectives™ on Stack Overflow

AngularJs How to pass the complex object in directives

2 Answers 2

Example

Example

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example

Example

Comments

Comments

Linked

Related