2

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

在指令中设置此类属性以避免不必要的开销（例如双向绑定）的推荐方法是什么？

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

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" />

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

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

但它只是行不通。如果我尝试在事件名称中指定参数，如下所示：

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

然后它仍然不起作用。相反，我在指令中传递的值被忽略。

我对后台真正发生的事情感到困惑，为什么它不能像预期的那样与“&”一起使用？在这种情况下，双向绑定对我来说确实是一种开销，因为我们只是在一个方向上传递函数名，如果不是作为一个简单的属性（使用“@”）。

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

4

1 回答 1

6

我让它使用&. 你说的对。创建双向绑定是一项开销。

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

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)" />
于 2013-09-17T08:40:37.643 回答