angular $on $emit $broadcast

最新推荐文章于 2024-06-21 08:47:39 发布

淡水河桥

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量484

点赞数 1

本文链接：https://blog.csdn.net/xufeiayang/article/details/77358935

版权

Angular 控制器中的 $scope 在各作用域之间遵循 JS 的对象原型继承方式
当子作用域中没有该对象时，默认向上（父作用域）寻找；子作用域有该对象时，使用子作用域对象。

注：这里的父作用域包含直接父级和祖先，子作用域包含直接子级和更下层级

例如，HTML如下：

<body ng-app="myApp">
    <div ng-controller="fatherCtrl">
        <input type="text" ng-model="name" ng-change="nameOnChange()">
        <h1>Father: {{name}}!</h1>
        <div ng-controller="sonCtrl">
             <input type="text" ng-model="name" ng-change="nameOnChange()"> 
             <h1>Son: {{name}}</h1>
        </div>
    </div>
</body>

fatherCtrl 和 sonCtrl 里都使用了 name

sonCtrl 里没有定义 name

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {

});

这时改变 sonCtrl 直接读取 fatherCtrl 中的 name

0001.gif

sonCtrl 里定义了 name

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {
     $scope.name = "son";
});

这时 sonCtrl 和 fatherCtrl 中的 name 互相不影响

0002.gif

如果想让不同作用域之间的数据互相传递，就需要用到事件系统里的 $on、$emit和$broadcast。
简单来说：

$on
用于监听事件
$emit
用于向上分发（子作用域向父作用域）
$broadcast
用于向下广播（父作用域向子作用域）

向上分发

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
    $scope.$on ('test', function(e, newName) {
        $scope.name = newName;
    });
});
app.controller('sonCtrl', function ($scope) {
    $scope.name = "son";
    $scope.nameOnChange = function () {
        $scope.$emit ('test', $scope.name);
    }
});

sonCtrl 中 nameOnChange 函数调用 $emit 事件，向上分发 $scope.name
fatherCtrl 中 $on 事件监听到结果，修改$scope.name 的值
在修改 sonCtrl 的 name 时，fatherCtrl 的 name 随之改变，但修改 fatherCtrl 的 name 时 sonCtrl 的 name 不变化

0003.gif

向下广播

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
    $scope.nameOnChange = function () {
        $scope.$broadcast ('test', $scope.name);
    }
});
app.controller('sonCtrl', function ($scope) {
    $scope.name = "son";
    $scope.$on ('test', function(e, newName) {
        $scope.name = newName;
    });
    $scope.nameOnChange = function () {
        // $scope.$emit ('test', $scope.name);
    }
});

与向上分发效果相反
fatherCtrl 中 nameOnChange 函数调用 $broadcast 事件，向下广播 $scope.name
sonCtrl 中 $on 事件监听到结果，修改$scope.name 的值
在修改 fatherCtrl 的 name 时，sonCtrl 的 name 随之改变，但修改 sonCtrl 的 name 时 fatherCtrl 的 name 不变化
注：这里在 sonCtrl 里也需要定义 nameOnChange ，否则会默认调用父级的

0004.gif

淡水河桥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular $on $emit $broadcast

Angular 控制器中的 $scope 在各作用域之间遵循 JS 的对象原型继承方式当子作用域中没有该对象时，默认向上（父作用域）寻找；子作用域有该对象时，使用子作用域对象。注：这里的父作用域包含直接父级和祖先，子作用域包含直接子级和更下层级例如，HTML如下： Father: {{name}}!
复制链接

扫一扫