(笔记)angular里controller跨域传值($rootScope/广播事件)

一、父controller与子controller定义了相同的变量

父controller 与 子controller 有相同的变量 , 则优先使用子controller的变量 。若子controller没有,则往上查找。类似于js的作用链


二、通过声明$rootScope全局变量

app.run 可声明全局变量 $rootScope
语法:

       var app = angular.module("apps", []).run(["$rootScope", function($rootScope) {
        $rootScope.text = [];
        (注意,在controller里用的时候需要传入 $rootScope 服务,此服务由ng模块生成。)

    }]);

三、通过 broadcast /emit/on 等广播事件

html:

<body ng-controller="ParentCtrl">
    <div>
        <!--父级-->
        <div ng-controller="SelfCtrl">
            <!--自己-->
            <a ng-click="click()">click me</a>
            <div ng-controller="ChildCtrl"></div>
            <!--子级-->
        </div>
        <div ng-controller="BroCtrl"></div>
        <!--平级-->
    </div>
</body>

js

app.controller('SelfCtrl', function($scope, $rootScope) {
        $scope.click = function() {
            $scope.$broadcast('to-child', 'child');
            //往下传
            $scope.$emit('to-parent', 'parent');
            //往上传
            $rootScope.$broadcast('to-all', 'allmagnize');
            //根scope向下传(broadcast),可传给所有scope
            //根scope向上传(emit),仅仅传给自己(rootScope)
        }
    }).controller('ParentCtrl', function($scope) {

        $scope.$on("to-parent", function(event, args) {
            event.stopPropagation(); //阻止继续往上传
            console.log('parent', args);

        });
        $scope.$on("to-child", function(event, args) {
            console.log('parent', args);
        });
        var aaa = $scope.$on("to-all", function(event, args) {
            console.log('parent', args);
        });

        $scope.$on('aaa', function() {
            deregister(); // 退订rootScope事件
        });
    }).controller('ChildCtrl', function($scope) {

        $scope.$on("to-parent", function(event, args) {

            console.log('child', args);

        });
        $scope.$on("to-child", function(event, args) {
            console.log('child', args);
        });
        $scope.$on("to-all", function(event, args) {
            console.log('child', args);
        })

    }).controller('BroCtrl', function($scope) {

        $scope.$on("to-parent", function(event, args) {

            console.log('bro', args);

        });
        $scope.$on("to-child", function(event, args) {
            console.log('bro', args);
        });
        $scope.$on("to-all", function(event, args) {
            console.log('bro', args);
        })

    })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值