web-dev-qa-db-ja.com

内部ディレクティブからngChangeイベント呼び出しに引数を渡す

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

私が抱えている問題は、ディレクティブのmyCallback関数内でmyCallbackを実行すると、selectの引数$eventが渡されないことです。

フィドル： http://jsfiddle.net/dkrotts/BtrZH/7/ 更新： http://jsfiddle.net/dkrotts/BtrZH/8/

何が悪いのですか？

angularjsangularjs-directive
13
Dustin

次のように、コールバックでパラメータを渡す必要があります。

callback({parametername: value});

そして、パラメータ名を[〜＃〜] html [〜＃〜]で宣言されたものと一致させる必要があります

あなたの場合：

callback({$event: val})
5
nikolai karadjov

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);
    }
}
4
Alex Osborn

次のコードは見栄えはよくありませんが、機能します（別の変数$eventを作成し、ng-changeを介して渡します）。

ng-click="$event = $event" ng-change="myCallback($event)"
2
John Doe

コントローラーに値を渡すには、テンプレートで定義されているレシーバー引数に対応するキーを持つオブジェクトを使用してコントローラーを呼び出します。

例えば.

素子

<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イベント呼び出しに引数を渡す

1
Nate Bosscher