Question

我有一个接受ng-change属性的指令：

<radio-buttons options="optionsList" 
               ng-model="myModel" 
               ng-change="myCallback($event)"></radio-buttons>

我在我的控制器myCallback中定义了一个函数，如下所示：

$scope.myCallback = function(e) {
    console.log("Callback from controller");   
    console.log(e);
}

我的radioButton指令中存在以下函数选择。我需要定义何时在select函数中的指令中执行ngChange回调：

function select(scope, val) {
    if (!scope.disabled && scope.selectedValue != val) {
        scope.selectedValue = val;
        scope.model = val;

        scope.callback.call();
    }
}

我遇到的问题是$event中的myCallback参数在我的指令的myCallback函数内执行select时没有被传递。

小提琴：http://jsfiddle.net/dkrotts/BtrZH/7/已更新：http://jsfiddle.net/dkrotts/BtrZH/8/

我做错了什么？

Answer 1

您必须在回调中传递参数，如下所示：

callback({parametername: value});

您必须将参数名称与 HTML

中声明的参数名称相匹配

在你的情况下：

callback({$event: val})

Answer 2

如果你想控制何时调用ng-change的处理程序，我认为最简单的方法是完全删除ng-change-你可以直接从你的ng-click回调中调用控制器函数。

我认为这可以实现您所需的功能：

http://jsfiddle.net/BtrZH/11/

如果需要，您可以从点击中捕获事件对象：

ng-click="select(scope, option.value, $event)"

然后你可以在需要时调用控制器功能：

function select(scope, val, $event) {
    if (!scope.disabled && scope.selectedValue != val) {
        scope.selectedValue = val;
        scope.model = val;
        scope.$parent.myCallback($event);
    }
}

Answer 3

以下内容看起来不太好，但可行（它会创建另一个变量$event并通过ng-change传递）：

ng-click="$event = $event" ng-change="myCallback($event)"

Answer 4

要将值传递给控制器，请使用带有与模板中定义的接收器参数对应的键的对象来调用它。

e.g。

元素

<my-element change="myFunction(value, id, event)"></my-element>

呼叫者

{
   "restrict" : ...,
   "scope" : {
       "change" : "&"
    },
   "controller" : function($scope){
       this.someEventHandler = function($event){

          // called here
          scope.change({
              "value" : "somevalue",
              "id" : "someid",
              "event" : $event
          });

       }
   }
}

父控制器接收器

$scope.myFunction = function(v, i, e){
   // do stuff
}

参考：Passing arguments to ngChange event call from inside directive

从内部指令传递参数到ngChange事件调用

4 个答案: