Question

我有一个包含输入字段的指令/模板。

输入字段有ngKeyup和ngModel。

我希望将ngKeyup函数传递给指令。指令/模板中输入字段的ngKeyup应该调用此函数。

此plunker显示选项1和选项2 http://plnkr.co/edit/kN8mitdG6pK5GNqGzYw5?p=preview

选项一最简单且部分有效，该函数只是通过＆＃39; =＆＃39;传递，该指令在ngKeyUp属性中引用它

指令

ngApp.directive("searchField", ['$parse',function ($parse) {

return {
    restrict: "E",
    scope: {
        myKeyUp: '=',

模板

<input type="text" ng-model="model" ng-keyup="myKeyUp" />

这部分有效，但$ event对象未传递。

在选项二中，指令从控制器接收函数作为＆＃39;＆amp;＆＃39;，尝试$解析它并调用它。这对我来说根本不起作用，但我对$ parse不是很熟悉。

ngKeyup可以接收任何参数，例如ng-keyup（a，b，c，$ index，$ event）

关键点/要求是该指令应该相同，即myKeyUp应该能够接受任何参数。

非常感谢任何帮助或指示。

由于约翰

Answer 1

必须是'＆amp;'在范围内，因为它允许您传递函数引用。

以及您在模板中需要做的是：

<input type="text" ng-model="model" ng-keyup="myKeyUp($event)" />

更新：您可以采取另一种方法：http://goo.gl/a27JrX

Answer 2

事实证明，这是一个非常简单的解决方案。

引自问题

我希望将ngKeyup函数传递给指令。指令/模板中输入字段的ngKeyup应该调用此函数。

结果是div只能有ng-keyup属性，它不必在输入字段上。这完全解决了这个问题。

http://plnkr.co/edit/xTigcDaSLpL9pvRtfY5J?p=preview

现在该指令仅将模型作为参数。 ngKeyup不在指令范围内。

ngApp.directive("searchField", ['$parse',function ($parse) {

return {
    restrict: "E",
    scope: {
        model: '='
    },
    templateUrl: 'searchFieldTemplate',
    replace: true,
    controller: ['$scope','$attrs', function ($scope, $attrs) {

    }]
  };

}]);

模板现在只关注模型

<div class="searchField">
<h4>Template</h4>
  (observe the console)
<div>
  <input type="text" ng-model="model" />
</div>

当你想到它时，这实际上是分配的......

将ngKeyUp函数传递给指令

2 个答案: