Question

我有这个指令：

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

并在我的网页html中

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

并在我的指令模板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>

如何将复杂对象“item”传递给我的指令？

Answer 1

从你的指令（控制器或链接函数）中你可以调用：scope.event({item: item})，将一个命名映射从参数名称传递给值以提供给回调。

示例：

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

用法：

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

Here's an example plnkr

请参阅：Can an angular directive pass arguments to functions in expressions specified in the directive's attributes?

Answer 2

角度指令使用'＆amp;'绑定到父范围表达式。这意味着您的指令会在指令内发生事件时对其进行评估。

实施例

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

如果您想从父作用域引发事件并让您的指令知道您应该使用“=”

实施例

app.directive('directiveList', function() {
    return {
        restrict: 'A',
        scope: {
           'event': '=onEvent'
        },
        link: function(scope){

          scope.event = function(item) {
             // manipulate item
             return "something";
          }

        }
    };
});

AngularJs如何在指令中传递复杂对象

2 个答案:

实施例

实施例