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"?

Answer 1

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?

Answer 2

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";
          }

        }
    };
});