Question

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

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。

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)

的原因

请参阅您在此处工作的指示：wikipedia

来自http://plnkr.co/edit/zGymbiSYgnt4IJFfvJ6G

＆安培;或＆amp; attr - 提供在上下文中执行表达式的方法父范围。如果未指定attr名称，则为属性名称假定与本地名称相同。给定范围的小部件定义：{ localFn：'＆amp; myAttr'}，然后隔离范围属性localFn将指向 count = count + value表达式的函数包装器。经常希望通过表达式从隔离范围传递数据在父范围内，可以通过传递本地地图来完成变量名和值到表达式包装器fn中。例如，如果表达式是增量（金额），那么我们可以指定金额通过将localFn称为localFn（{amount：22}）
来获取值

Angular Custom Directives：使用链接函数中的参数调用函数

2 个答案: