Question

在AngularJS中，你可以创建一个按钮来调用这样的动作：

<div ng-controller="myController">
  <button ng-click="onButtonClicked()">Click me</button>
</div>

所以，我正在插入一个这样的自定义指令：

并在my-canvas.js指令文件的链接函数中，我用KineticJS画布替换标记。然后，用户通过拖动Kinetic形状来操纵画布，最后，当用户使用他需要做的形状时，我希望指令调用myController上定义的动作。我正在考虑这样的事情：

<div ng-controller="myController">
  <my-canvas ng-success="onScenarioSuccess" />
</div>

但我无法弄清楚如何正确地做到这一点。

如何制定指令以编程方式调用它的动作/事件？

Answer 1

如果希望指令公开API以绑定行为，则应使用隔离范围并使用&本地范围属性。这允许您传入指令可以调用的函数。这是一个简单的例子：

.directive('testDirective', function () {
    return {
        restrict: 'E',
        scope: {
            action: '&'
        },
        template: '<button ng-click="action()">Test</button>'
    };
});

并使用它：

<test-directive action="myControllerFunction()"></test-directive>

根据文件：

&绑定允许指令触发对a的评估在特定时间在原始范围的上下文中表达。允许任何合法表达，包括表达式包含函数调用。因此，&绑定是理想的选择将回调函数绑定到指令行为。

documentation中有更多细节。

Answer 2

如果您想公开自定义事件，例如ng-success，并希望在事件上调用函数。你可以做@Beyers提到的使用隔离范围的内容。

或者查看ng-click的源代码，它只是将javascript事件包装在$ scope.apply中，使用$parse服务来评估传递给它的表达式。可以在链接功能

中添加这样的内容

var fn = $parse(attr['ngSuccess']);
element.on('someEvent', function (event) {
    var callback = function () {
        fn(scope, {
            $event: event
        });
    };
    scope.$apply(callback);
});

此机制的优点是不会创建隔离范围。

如何在AngularJS中调用自定义指令的操作？

2 个答案: