angularjs - 从内部指令将参数传递给 ngChange 事件调用

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

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

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

        scope.callback.call();
    }
}

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

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

我究竟做错了什么？

Answer 1

如果您想控制何时调用 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 2

您必须像这样在回调中传递参数：

callback({parametername: value});

您必须将参数名称与HTML中声明的名称相匹配

在你的情况下：

callback({$event: val})

Answer 3

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

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

Answer 4

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

例如

元素

<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
}

REF：从内部指令将参数传递给 ngChange 事件调用