Question

假设您需要编写一个带有一个attribute-parameter - 控制器事件函数名称的指令。该指令执行一些处理，然后在该事件处理程序上触发通知，并向其传递一些处理参数。

在指令中设置此类属性的建议方法是什么，以避免不必要的开销，如双向绑定？

到目前为止，我只能通过使用双向绑定来实现这一点，如下例所示：

app.controller("testCtrl", function ($scope) {
    $scope.onClickEvent = function (ctrlDown) {
        alert(ctrlDown);
    }
});

app.directive("customInput", function () {
    return {
        restrict: "E",
        scope: {
            onClickNotify: "=onClick",
        },
        template: "<input type='text' ng-click='onClick()' />",
        replace: true,
        transclude: false,
        link: function (scope, element, attrs, controller) {
            scope.onClick = function () {
                if (typeof (scope.onClickNotify) == 'function') {
                    scope.onClickNotify(window.event.ctrlKey);
                }
            }
        }
    }
});

<custom-input on-click="onClickEvent" />

在上面的示例中，指令使用“=” - 属性的双向绑定，这是我能够使其工作的唯一方式。我无法理解的是为什么我们不能使用“＆amp;”？根据AngularJS文档，我们应该能够在传递带名称的参数时，例如：

scope.onClickNotify({ctrlDown: window.event.ctrlKey});

但它不起作用。如果我尝试在事件名称中指定参数，如下所示：

<custom-input on-click="onClickEvent(ctrlDown)" />

然后它仍然无效。相反，我在指令中传递的值将被忽略。

我对背景中真正发生的事情感到困惑，为什么它不适用于“＆amp;”正如所料？在这种情况下，双向绑定看起来像是一个开销，因为我们只是在一个方向传递函数名称，如果不是作为一个简单属性（使用“@”）。

如果我在这里做错了什么，那么正确的方法是什么？

Answer 1

我使用&开始工作。你是对的。创建双向绑定是一种开销。

实际上你应该在调用控制器方法时传递一个对象：

app.directive("customInput", function ($timeout) {
    return {
        restrict: "E",
        scope: {
            onClickNotify: "&onClick",
        },
        template: "<input type='text' ng-click='onClick()' />",
        replace: true,
        transclude: false,          
        link: function (scope, element, attrs, controller) {
            scope.onClick = function () {
                if (typeof (scope.onClickNotify) == 'function') {
                    scope.onClickNotify({ctrlDown:"foo"});
                }
            }
        }
    }
});

HTML：

<custom-input on-click="onClickEvent(ctrlDown)" />

AngularJS：从指令调用控制器事件

1 个答案: