Angular 自定义指令：使用 link 函数中的参数调用函数

Question

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

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);

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

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

Answer 1

你应该在你的指令中这样调用它：

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

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

option-select="functionToCall(object)"

然后在你的控制器中：

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

Answer 2

您传递的是在父作用域中计算的函数结果，而不是函数本身。您可以计算表达式，然后执行结果函数。

所以，你应该尝试的是这个

<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

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22})

Angular 自定义指令：使用 link 函数中的参数调用函数

Angular Custom Directives: Calling a function with arguments from within the link function

javascript

angularjs

angularjs-directive

ng-repeat

angularjs-ng-repeat