[解決済み] AngularJSの.$on()とは？

質問

次のようなコードがあります。 $rootScope.$on('abc',function(event, next, current){ }); をチュートリアルで紹介しました。

私の疑問は .$on() ? もしそれが関数であるなら、なぜその前に $ ?

解決方法は？

$on は $broadcast と $emit - というのは、他の場所からのコードをトリガーする方法です。

については、まず $on のメソッドであることを知っておく必要があります。 $scope

次に知っておくべきことは、$プレフィックスはAngularメソッドを指し、$$プレフィックスは使用を避けるべきAngularメソッドを指すということです。

さて、ここで $on があります。

以下は、テンプレートとそのコントローラの例です。 $broadcast/$on は、私たちが望むことを実現するのに役立ちます。

<div ng-controller="FirstCtrl">
    <input ng-model="name"/> 
    <button ng-click="register()">Register </button>
</div>

<div ng-controller="SecondCtrl">
    Registered Name: <input ng-model="name"/> 
</div>

コントローラは

app.controller('FirstCtrl', function($scope){
    $scope.register = function(){

    }
});

app.controller('SecondCtrl', function($scope){

});

質問ですが、ユーザーが登録をクリックしたときに、2つ目のコントローラーにどのように名前を渡せばいいのでしょうか？ 複数の解決策を思いつくかもしれませんが、私たちが使うのは$broadcastと$onを使ったものです。

ブロードキャストとエミット

どちらを使うべきでしょうか？ ブロードキャストはすべての子dom要素に、$emitはその逆ですべての祖先dom要素にチャンネルダウンします。

emitか$broadcastかの選択を避ける最良の方法は、$rootScopeからチャネルし、そのすべての子に対して$broadcastを使用することです。 これは、dom要素が兄弟であるため、私たちのケースをより簡単にします。

ルートスコープを追加し、$broadcastを使用可能にする

app.controller('FirstCtrl', function($rootScope, $scope){
    $scope.register = function(){
        $rootScope.$broadcast('BOOM!', $scope.name)
    }
});

rootScopeを追加し、$broadcast(broadcastName, arguments)を使用していることに注意してください。 broadcastNameにはユニークな名前をつけて、secondCtrlでその名前をキャッチできるようにしたい。 ここではお遊びでBOOM！にしてみました。 2つ目の引数'arguments'はリスナーに値を渡せるようにします。

ブロードキャストの受信

2つ目のコントローラでは、ブロードキャストをリッスンするコードをセットアップする必要があります。

app.controller('SecondCtrl', function($scope){
  $scope.$on('BOOM!', function(events, args){
    console.log(args);
    $scope.name = args; //now we've registered!
  })
});

本当に簡単なことなんです。 ライブの例

同様の結果を得るためのその他の方法

この一連のメソッドは効率的でもメンテナンスが簡単でもないので、なるべく使わないでください。しかし、あなたが抱えている問題を解決するための簡単な方法です。

同じことは、サービスを使うか、コントローラを簡略化することで大抵は実現できます。 これについては詳しく説明しませんが、念のため触れておこうと思います。

最後に、本当に便利なブロードキャストとして「$destroy」を覚えておいてください。 とにかく、$destroyはコントローラが破壊されたときにブロードキャストされます。