• 首页
  • angularjs
  • angular.js 中 父级和 子集 controller 之间的通讯

angular.js 中 父级和 子集 controller 之间的通讯

一介布衣 2015-12-05 angularjs 38849

angular.js.jpg

文章目录

在同个 angular.js 应用的控制器之间进行通信可以有很多种不同的方式，本文主要讲两种：

基于scope继承的方式
基于event传播的方式


基于scope继承的方式

最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child，Child 在 Parent 内，那Child 可以称为子控制器，它将继承父控制器Parent的scope。这样，Child就可以访问到Parent的scope中的所有函数和变量了。
需要注意的是，由于scope的继承也是基于Js的原型继承，如果变量是基本类型的，那在Child中的修改（写），有可能会导致Parent中的数据变脏


基本类型变量的继承


function Sandcrawler($scope) {
    $scope.location = 'Mos Eisley North';
    $scope.move = function(newLocation) {
        $scope.location = newLocation;
    }
}

function Droid($scope) {
    $scope.sell = function(newLocation) {
        $scope.location = newLocation;
    }
}
// html
<div ng-controller="Sandcrawler">
    <p>Location: </p>
    <button ng-click="move('Mos Eisley South')">Move</button>
    <div ng-controller="Droid">
        <p>Location: </p>
        <button ng-click="sell('Owen Farm')">Sell</button>
    </div>
</div>

看完上面的代码我们知道，location 属性是直接被注册到 $scope 中的，Droid控制器所拥有的scope从Sandcrawler控制器的scope中继承了这个属性并且可以读取它。看以下两个假设场景：

  1. 如果 Sandcrawler 中改变了 location 属性，在 Droid 中也会读取到这个改变；在 view 中的表现则是：点击了 Move 按钮的话，两个 p 标签都会显示 Mos Eisley South

  2. 反过来，如果 Droid 中对 $scope.location 进行改写，它只改写自己scope中 location 属性的值，它不会影响 Sandcrawler 中的这个属性的值；在 view 中的表现则是：当点击了 Sell 按钮之后，两个控制器scope之间的数据共享就不复存在了，之后无论点多少次 Move 按钮，都影响不了 Droid 中的 p 标签的显示了

经过上面的教训，有时候我们想要达到的效果可能达不到（如点了 Sell 按钮之后再点 Move 还想让它起作用），这样在ng的开发者中逐渐达成了一个一致的约定，千万不要把那些可以被子级scope改写的属性用基础类型直接添加在 $scope 对象上，而是应该尽可能地用对象类型去添加


对象类型变量的继承

通过上面的结论我们知道，可以用对象类型的变量来作为属性添加到 $scope 中去，这样，只要是引用了这个对象的，无论是谁，在哪个控制器里面，对这个对象变量的改写都会影响都所有引用了这个对象的实例。看下面的代码：


function Sandcrawler($scope) {
    $scope.sandcrawler.location = 'Mos Eisley North';
}

function Droid($scope) {
    $scope.summon = function(newLocation) {
        $scope.sandcrawler.location = newLocation;
    }
}
// html
<div ng-controller="Sandcrawler">
    <p>Sandcrawler Location: </p>
    <div ng-controller="Droid">
        <button ng-click="summon('Owen Farm')">
            Summon Sandcrawler
        </button>
    </div>
</div>

跑一下上面的代码就知道，当我们使用“召唤术”的时候，可以改写 Sandcrawler 控制下的 p 标签的显示了


基于event传播的方式

基于scope继承的方式只能处理父子级控制器之间的通信问题，不能处理兄弟/相邻控制器之间的通信问题。这时候，我们需要使用基于event传播的方式来进行通信，这里，ng为我们提供了三个方法：$on , $emit , $broadcast ，需要明确的是：这种方法不仅可以处理兄弟scope间的通信问题，对于解决父子scope间的通信也是毫无压力


子-->父：$emit

整个过程是这样的：

  1. 子scope中的控制器通过 $scope.$emit 触发一个事件向上传播
  2. 这个事件会经过每一层的父scope，至于处不处理是父scope自己的事情了
  3. 如果处理，就在想要处理的那个祖先scope中放一个 $scope.$on 监听着就行了

// 父scope上的控制器
function Sandcrawler($scope) {
    $scope.location = 'Mos Eisley North';
    $scope.$on('summon', function(e, newLocation) {
        $scope.location = newLocation;
    });
}
// 子scope上的控制器
function Droid($scope) {
    $scope.location = 'Owen Farm';
    $scope.summon = function() {
        $scope.$emit('summon', $scope.location);
    }
}
// html
<div ng-controller="Sandcrawler">
    <p>Sandcrawler Location: </p>
    <div ng-controller="Droid">
        <p>Droid Location: </p>
        <button ng-click="summon()">Summon Sandcrawler</button>
    </div>
</div>

跟我之前写的一篇DOM事件一样，如果你不想让你的事件再往更上层传播，在 $on 中的处理函数调用 e.stopPropagation() 即可


父-->子：$broadcast

接下来的东西就简单了，从父到子，用另外一个方法就是了，同样用 $on 监听着，all done，看下面代码：


// 父scope上的控制器
function Sandcrawler($scope) {
    $scope.location = 'Mos Eisley North';
    $scope.recall = function() {
        $scope.$broadcast('recall', $scope.location);
    }
}
// 子scope上的控制器
function Droid($scope) {
    $scope.location = 'Owen Farm';
    $scope.$on('recall', function(e, newLocation) {
        $scope.location = newLocation;
    });
}
// html
<div ng-controller="Sandcrawler">
    <p>Sandcrawler Location: </p>
    <button ng-click="recall()">Recall Droids</button>
    <div ng-controller="Droid">
        <p>Droid Location: </p>
    </div>
</div>

同级之间

拥有同个父scope的子级scope之间，也就是兄弟/相邻scope之间的通信，其实是借助“奶爸”传递消息的：

  1. 子级scope中有谁想传消息了，$emit 一个给“奶爸”
  2. 然后通过“奶爸” $broadcast 给所有孩子这个相同的信息，当然发出信息的那个可以选择是否要忽略掉自己发出的信息

// 父scope上的控制器
function Sandcrawler($scope) {
    $scope.$on('requestDroidRecall', function(e) {
        $scope.$broadcast('executeDroidRecall');
    });
}
// 子scope上的控制器
function Droid($scope) {
    $scope.location = 'Owen Farm';
    $scope.recallAllDroids = function() {
        $scope.$emit('requestDroidRecall');
    }
    $scope.$on('executeDroidRecall', function() { 
        $scope.location = 'Sandcrawler';
    });
}
// html
<div ng-controller="Sandcrawler">
    <div ng-controller="Droid">
        <h2>R2-D2</h2>
        <p>Droid Location: </p>
        <button ng-click="recallAddDroids()">Recall All Droids</button>
    </div>
    <div ng-controller="Droid">
        <h2>C-3PO</h2>
        <p>Droid Location: </p>
        <button ng-click="recallAddDroids()">Recall All Droids</button>
    </div>
</div>

上面代码中要注意的是：子scope通过 $emit 发出的事件名不能与父scope用 $broadcast 的事件名一样，如果有传参数，那当然参数可以一样，因为参数就是我们要传的数据。事件名不能一样是为了防止进入死循环。

出自:angular.js 中 父级和 子集 controller 之间的通讯

Copyright © 2012 - 2021 一介布衣

京ICP备14006909号-1

回到顶部