Angularjs controller之間的通訊

時間 2019-11-17

標籤 angularjs controller 之間通訊欄目 AngularJS 简体版

原文原文鏈接

剛剛看了網上的一些關於控制器之間的通訊；而後結合本身項目作了一些，這裏主要作的是二個同級之間的controller通訊。css

Html：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個同級的控制器，如今childCtr2須要childCtr1的參數來顯示相關信息，下面是控制器childCtr1的代碼：app

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

下面是childCtr2的代碼：函數

angular.module("app", [])
.controller("childCtr2", function ($scope) {
    $scope.$on("Ctr1NameChange",//監聽有沒有名爲」Ctr1NameChange「的消息，若是有，則執行下面函數
 
    function (event, msg) {
        console.log("childCtr2", msg);
        $scope.ctr1Name = msg;
    });
});

以上是針對控制器分離的文件寫的不一樣形式；固然也能夠將他們合併到一個頁面spa

 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?html,css,js,outputcode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。