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

xiaoxiao2021-02-27  233

一、父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); }) })
转载请注明原文地址: https://www.6miu.com/read-11674.html

最新回复(0)