Angular 自定义指令：使用链接函数中的参数调用函数答案

【问题标题】：Angular Custom Directives: Calling a function with arguments from within the link functionAngular 自定义指令：使用链接函数中的参数调用函数
【发布时间】：2015-06-04 07:23:18
【问题描述】：

我正在使用自定义指令构建一个由输入过滤的可点击选项列表。

HTML：

<combobox 
    input-model="myModel" 
    options="myList" 
    option-label="label"
    option-select="selectFn()"></combobox>

指令（简化）：

app.directive("combobox", function() {
    return {
        restrict: "E",
        replace: true,
        template: "<input type=‘text’ ng-model=‘inputModel’ />" +
                      "<button ng-repeat='option in options | " +
                                         "filter: inputModel’" +
                              "ng-mousedown=‘optionSelected(option)’" +
                      ">{{option[optionLabel]}}</button>",
        scope: {
            inputModel: "=",
            options: "=",
            optionLabel: "@",
            optionSelect: "&"
        },
        link: function(scope, elem, attrs) {
            scope.optionSelected  = function(option) {
                // some stuff here...
                scope.optionSelect();
            }
        }
    }
})

范围：

$scope.myList = [
    { label: "First Option", value: 1 },
    { label: "Second Option", value: 2 },
    { label: "Second Option", value: 2 }
]
$scope.selectFn() = function() {
    // doing stuff here...
}

但我想使用调用它的选项中的属性调用 selectFn。比如：

option-select=“selectFn(option.value)”

或

scope.optionSelect(option);

这可能吗？我可以在范围内调用函数并从链接函数中传递参数吗？

出于自定义原因，我不能使用组合框库，例如 ui-select。

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-repeat ng-repeat

【解决方案1】：

您传递的是在父范围内评估的函数结果，而不是函数本身。您可以评估您的表达式，然后执行结果函数。

那么，你应该试试这个

<combobox 
    input-model="myModel" 
    options="myList" 
    option-label="label"
    option-select="selectFn">

在您的标记中，然后在您的指令中

    link: function(scope, elem, attrs) {
        scope.optionSelected  = function(option) {
            // some stuff here...
            scope.optionSelect()(option);
        }
    }

请注意，option-select="selectFn" 中的表达式将被传递给封装在 optionSelect 函数中的隔离作用域。当你评估它时，你会得到你想要的功能。这就是为什么你使用scope.optionSelect()(option)

在此处查看您的指令：http://plnkr.co/edit/zGymbiSYgnt4IJFfvJ6G

来自https://docs.angularjs.org/api/ng/service/$compile

& 或 &attr - 提供一种在上下文中执行表达式的方法父范围。如果未指定属性名称，则属性名称假定与本地名称相同。范围的给定和小部件定义：{ localFn:'&myAttr' }，则隔离范围属性 localFn 将指向 count = count + value 表达式的函数包装器。经常最好通过表达式从隔离范围传递数据到父范围，这可以通过传递本地地图来完成变量名称和值放入表达式包装器 fn。例如，如果表达式是增量（数量），那么我们可以指定数量通过将 localFn 调用为 localFn({amount: 22})
来获取值

【讨论】：

【解决方案2】：

你应该在你的指令中这样称呼它：

scope.optionSelect({
    data: []
});

您的模板（对象将是带有数据数组的对象）：

option-select="functionToCall(object)"

然后在你的控制器中：

$scope.functionToCall = function(object){
    console.log(object);
    //will output: []
}

【讨论】：