Question

我有一个指令，我通过scope传递数据数组。但是，当我点击一个带有ng-click的按钮时，该功能不起作用。这是我的指示：

angular.module('appModule').directive('myDirective', myDirective);
function myDirective() {
    return {
        restrict: 'A',
        scope: {
            myDirective: '=',
        },
        link: function( scope ) {
            scope.enable = function() {
                console.log( 'test' );
            }
        }
    }
}

这是我的HTML：

<ul my-directive="vm.myData">
    <li ng-repeat="data in vm.myData track by data.id" ng-click="enable( data.id )">{{data.name}}</li>
</ul>

当我点击li元素时，没有任何反应。如果我删除了directive上的范围定义，那么我可以按预期调用该函数。

通过环顾四周，我看到使用template内的directive可以解决问题。但是我无法使用template内的directive，因为它可能会根据位置而改变，但预期的最终行为在多个视图中会相同。

另外，我需要访问指令中的整个数组以用于其他目的。

我该如何解决这个问题？

Answer 1

因为你在指令中声明了一个范围你隔离了范围，你必须用ng-click

为指令添加一个html。

http://plnkr.co/edit/8zWou1E9v29PdJFTRMvq?p=preview

  <ul mydirective myparam="myData" >
      <li ng-repeat="data in myData track by data.id" ng-click="enable( data.id )">{{data.name}}</li>
  </ul>

此ng-click将调用父控制器中定义的函数而不是mydirective

Answer 2

试试这个

angular.module('appModule').directive('myDirective', myDirective);
    function myDirective() {
        return {
            restrict: 'A',
            scope: {
                myModel: '=',
            },
            link: function( scope ) {
                scope.enable = function() {
                    console.log( 'test' );
                }
            }
        }
    }

    <ul my-directive my-model="vm.myData">
        <li ng-repeat="data in vm.myData track by data.id" ng-click="enable( data.id )">{{data.name}}</li>
    </ul>

声明范围时，AngularJs指令函数不起作用

2 个答案: