zoukankan      html  css  js  c++  java
  • Angularjs controller之间的通信

    刚刚看了网上的一些关于控制器之间的通信;然后结合自己项目做了一些,这里主要做的是二个同级之间的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个同级的控制器,现在childCtr2需要childCtr1的参数来显示相关信息,下面是控制器childCtr1的代码:

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

    以上是针对控制器分离的文件写的不同形式;当然也可以将他们合并到一个页面

     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,output

  • 相关阅读:
    Sql中关于日期的格式化
    linq中存储过程返回集合存在的问题
    当页面请求数据是从静态页中获取的Post方法会报405的错误
    jquery中load方法在ie下会卡住
    jquery用div实现下拉列表的效果
    jquery获取服务器端控件的方法
    【转】jquery实现文本框有提示输入的信息
    toString()方法浅谈
    Object类与上下转型
    多态
  • 原文地址:https://www.cnblogs.com/tiedaweishao/p/4798651.html
Copyright © 2011-2022 走看看