关于AngularJS controller之间的数据通信

方法一:

要知道的知识点:

1. broadcast会把事件广播给所有子controller;

2. emit则会将事件冒泡传递给父controller;

3. $on则是angularjs的事件注册函数;

接下来我们就来看一个具体的实例代码:

首先是html代码,这个结构也比较简单,就是一个父控制器下分别有childController和childController2这两个子控制器:

    <body ng-app="myApp">
        <div ng-controller="parentController">
            <div ng-controller="childController">
                <input ng-change="change(name)" ng-model="name" type="text" placeholder="请在此处输入内容...">
            div>
            <div ng-controller="childController2">
                <h1>下面就是value值h1>
                {{ wenzi }}
            div>
        div>
    body>

接下来就是操作的angular代码:

var app = angular.module('myApp',[]);
app.controller('parentController',['$scope',function($scope){
    //接收子控制器传递上来的值;
    $scope.$on('doName',function(e,msg){
        //将接收到的这个值广播给所有的子控制器;
        $scope.$broadcast('commonName',msg);
    });
}])
.controller('childController',['$scope',function($scope){
    $scope.change = function(name){
        //这里接收到input框输入的value值,并把它emit到父控制器上;
        $scope.$emit('doName',name);
    };
}])
.controller('childController2',['$scope',function($scope){

    $scope.$on('commonName',function(e,msg){
        //获取到父控制器广播的内容;
        $scope.wenzi = msg;
    });
}]);

方法二:

  1. AngualrJS中的controller是一个函数,主要是用来向$scope中添加功能,我们一般用它来给作用域对象设置初始状态,并添加自定义行为;
  2. 当我们在创建一个控制器的时候,angularjs会帮我们生成并传递一个新的 scopecontrollerangularjsngapp rootScope.
  3. 每个 scope root指向 rootScope, scope.$parent指向的是父级作用域。
  4. controller之间的通信本质上是当前的controller所在的 scopecontroller scope进行通信。

接下来介绍通过$rootScope实现controller通信的方式:

首先是html代码,和方法一中的差不多,区别只是我把包裹着的父控制器去掉了,表示,同级别的也可以进行传递,不需要再通过我们自己定义的父控制器;

    <body ng-app="myApp">
        <div>
            <div ng-controller="childController">
                <input ng-change="change(name)" ng-model="name" type="text" placeholder="请在此处输入内容...">
            div>
            <div ng-controller="childController2">
                <h1>下面就是value值h1>
                {{ $root.wenzi }}
            div>
        div>
    body>

接下来就是angular代码了:

注意: angularJS中默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到 rootScope rootScope中也无法找到程序依旧运行,但视图不会更新。

var app = angular.module('myApp', []);
app.controller('childController', ['$scope', '$rootScope', function($scope, $rootScope) {
        $scope.change = function(name) {
            $rootScope.wenzi = name;
        };
    }])
    .controller('childController2', ['$scope', '$rootScope', function($scope, $rootScope) {
        $scope.wenzi = $rootScope.wenzi;
    }]);

你可能感兴趣的:(angular)