Angular Custom Directives：使用链接函数内的参数调用一个函数

我正在构建一个使用自定义指令的输入过滤的可单击选项列表。Angular Custom Directives：使用链接函数内的参数调用一个函数

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。

来源

2015-06-03 Kevin Chung

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

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

<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 - 提供了一种在父作用域上下文中执行的表达式。如果未指定attr名称，则假定属性名称与本地名称相同。给定范围的小部件定义：{ localFn：'& myAttr'}，那么隔离范围属性localFn将指向 count = count + value表达式的函数包装。通常，希望通过表达式将数据从隔离范围传递到父范围，这可以通过将本地变量名称和值的映射传递到表达式包装函数fn来完成。例如，如果表达式为增量（量），那么我们可以通过调用localFn如localFn（{量：22}）指定的金额值

来源

2015-06-03 05:14:30

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

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

你的模板（对象将是与数据数组对象）：

option-select="functionToCall(object)"

在你的控制器

然后：

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

来源

2015-06-03 01:48:38 dcardoso

Angular Custom Directives：使用链接函数内的参数调用一个函数

回答

相关问题