AngularJS：如何将参数/函数传递给指令？答案

【问题标题】：AngularJS: How to pass arguments/functions to a directive?AngularJS：如何将参数/函数传递给指令？
【发布时间】：2012-11-23 10:31:32
【问题描述】：

看看this Fiddle，我需要改变什么，模板中的表达式使用我在 HTML 中定义的参数进行评估？ SAVE-按钮应该调用控制器的blabla()-function，因为我通过了吗？

var myApp = angular.module('MyApp',[])
myApp.directive('editkeyvalue', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            accept: "expression"
        },
        template : '<div><label class="control-label">{{key}}</label>' +
        '<label class="control-label">{{key}}</label>' +
          '<input type="text" ng-model="value" />'+
        '<button type="button" x-ng-click="cancel()">CANCEL</button>' +
        '<button type="submit" x-ng-click="save()">SAVE</button></div>',

      controller: function($scope, $element, $attrs, $location) {
        $scope.save= function() {
          $scope.accept();
        };
      }
    }
});

我并没有真正看透这一点。感谢您的帮助！

【问题讨论】：

标签： javascript html controller scope angularjs

【解决方案1】：

您可以按照 Roy 的建议使用 property: '=' 设置两种方式的数据绑定。因此，如果您希望将 key 和 value 都绑定到本地范围，您可以这样做

scope: {
    key: '=',
    value: '='
},

由于您正在传递这些值，因此您可以在指令的控制器中访问它们。但是如果你想在父作用域的上下文中运行一个函数，这似乎是你想用 accept 属性做的事情，那么你需要像这样告诉 angular

scope: {
    accept: "&"
}

现在，从您的 save 方法中，您可以调用通过 accept 传递的函数

controller: function($scope, $element, $attrs, $location) {
    $scope.save= function() {      
        $scope.accept()
    };
}

这是jsfiddle

【讨论】：

有什么方法可以将指令中的变量传递给传递给它的函数？
找到了我自己问题的答案。您必须命名所涉及的参数。在这里找到答案：whatibroke.com/?p=894

【解决方案2】：

scope: {
    accept: "&"
}

函数名使用小写字母，否则不起作用。

【讨论】：

为什么这种东西只在周五下午出现？谢谢，伙计。
你不需要使用小写字母，只要知道如果你把它写成'acceptSomething'，你会在标记中将它称为'accept-something'

【解决方案3】：

请注意，您不需要保存包装功能。只需在模板中调用它：

'<button type="submit" x-ng-click="accept()">SAVE</button></div>',

转置函数调用并按预期传递参数。

这简化了代码并使其更易于阅读。

【讨论】：