Anglarjs controller間の通信

6518 ワード

javascript

ネット上のいくつかのコントローラ間の通信を見ました.そして、自分のプロジェクトに合わせていくつかのことをしました.ここでは主に2つの同級間のcontroller通信をします.
Html:

 1 <html>
 2 <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js">script>
 3 <body>
 4 <div ng-app="app">
 5      <div ng-controller="childCtr1">name :
 6         <input ng-model="name" type="text"  />
 7     div>
 8      <div ng-controller="childCtr2">Ctr1 name:
 9          {{ctr1Name}}
10      div>
11  div>
12 body>
13 html>

上のhtmlコードは同じレベルのコントローラを2つ設置していますが、現在はchildCtr 2はchildCtr 1のパラメータを必要としています.以下はコントローラchild Ctr 1のコードです.

1 angular.module("app", [])
2 .controller("childCtr1", function ($scope) {
3     $scope.$watch("name",function (){//    “name"，          ；
4         //alert("123");
5         $scope.$emit("Ctr1NameChange", $scope.name);//    Ctr1NameChange   ，  $scope.name
6     });
7 });

以下はchildCtr 2のコードです.

angular.module("app", [])
.controller("childCtr2", function ($scope) {
    $scope.$on("Ctr1NameChange",//       ”Ctr1NameChange“   ，   ，       
 
    function (event, msg) {
        console.log("childCtr2", msg);
        $scope.ctr1Name = msg;
    });
});

以上はコントローラから分離されたファイルに対して異なる形式で書かれています.もちろん彼らを一つのページに統合することもできます.

 1 angular.module("app", [])
 2 .controller("childCtr1", function ($scope) {
 3     $scope.$watch("name",function (){
 4         //alert("123");
 5         $scope.$emit("Ctr1NameChange", $scope.name);
 6     });
 7 }).controller("childCtr2", function ($scope) {
 8     $scope.$on("Ctr1NameChange",
 9  
10     function (event, msg) {
11         console.log("childCtr2", msg);
12         $scope.ctr1Name = msg;
13     });
14 });

他にもコントローラ間の通信方法がたくさんあります.serverのfactoryを含めて、参考にしてください.http://jsbin.com/hopazo/5/edit?htmlcss,js,output
転載先:https://www.cnblogs.com/tiedaweishao/p/4798651.html

JavaScriptの中の伝値と引用を深く理解する