Question

我有如下指令

demoApp.directive('myButton', [function ($compile) {
    return {

        restrict: 'E',

        template: '<input type="button" value="Click" data-ng-click="click()" />',

        scope: { onSingleclick: '&singleclickFn' },

        link: function (scope, iElm, iAttrs, controller) {

            scope.click = function () {

                scope.onSingleclick();

            }
        }
    };

}]);

控制器方法：

$scope.singleClick = function () {

        alert('singleClick ' );

}

当我写：

<my-button singleclick-fn="singleClick()"></my-button>

然后它完美地运作。

上面的代码工作正常。

现在我想使用另一个指令来包装上面的指令。像

demoApp.directive('myNewButton', [function ($compile) {
    return {

        restrict: 'E',

        scope: { singleclick: '&singleclickFn' },

        template: '<my-button singleclick-Fn="singleclickFn" />',

        link: function (scope, iElm, iAttrs, controller) {


        }
    };

}]);

<my-new-button   singleclick-fn="singleClick()"></my-new-button>

现在点击方法不起作用。

Answer 1

将模板更改为：

'<my-button singleclick-Fn="singleclick()" />'

当您使用&传递表达式时，angular将它们包装在函数中并将其分配给范围变量。所以当你写singleclick: '&singleclickFn'时，你会得到这个：

function singleclick(){
  $parse('singleClick()')
}

没有singleClick()中的括号，什么都不会发生。您还可以使用=而不是&通过引用传递函数，并从上面删除括号。这意味着在范围中存在对父实际函数的引用。

DEMO

Answer 2

您可以简化代码。您不需要将元素绑定到click事件。当你使用ng-click时，Angular会这样做。

app.directive('myButton', [function () {
  return {
    restrict: 'E',
    template: '<input type="button" value="Click" ng-click="onSingleclick()" />',
    scope: { onSingleclick: '&singleclickFn' },
  };
}]);

app.directive('myNewButton', [function () {
  return {
    restrict: 'E',
    scope: { singleclick: '&singleclickFn' },
    template: '<my-button singleclick-fn="singleclick()" />',
  };
}]);

编辑：这是Plunker

如何使用从一个指令到另一个指令的隔离范围操作

2 个答案: