AngularJS控制器间数据共享-优快云博客

本文链接：https://blog.youkuaiyun.com/chengzhang_jian/article/details/78198618

本文介绍了AngularJS中不同控制器间数据共享的三种方法：利用$rootScope存储共享数据、通过控制器间的嵌套关系进行数据传递及使用事件广播与监听机制实现跨控制器通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS 控制器控制 AngularJS 应用程序的数据。
ng-controller 指令定义了应用程序控制器。
那么：
1、不同的控制器之间的数据是彼此隔离的
2、不同的控制器之间如何共享数据？？

不同的控制器间的数据传递的方法：

方式1：借助于$rootScope

借助于 $scope与$ rootScope之间的关系。
把要共享的数据存在$rootScope,所有的子对象就可以读取该数据
$scope的id是从2开始依次往上递增， id为1的是谁？$ rootScope是根作用域对象，其余的 $scope都是子对象也就是说$ rootScope是 $scope的父元素。$ rootScope时id为1.所有的 $scope的id是从2开始依次递增的。$ scope与rootScope的关系如下图：这里写图片描述

方式2：控制器之前的嵌套：

在调用控制器的元素之间的嵌套关系
如下例。运用了方式1与方式2中的方法。

!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script>
</head>
<body>

<div ng-controller="myCtrl01">
  <p>{{"in myCtrl01 name is "+name}}</p>
</div>

<div ng-controller="myCtrl02">
  <p>{{"in myCtrl02 name is "+name}}</p>
  <p>{{"in myCtrl02 schoolName is "+schoolName}}</p>
  <!-- 控制器之间的嵌套-->
  <div ng-controller="myCtrl03">
    <p>{{'inMyCtrl03 age is '+age}}</p>
  </div>
</div>

<script>
  var app = angular.module('myApp',['ng']);

  app.controller('myCtrl01', function ($scope,$rootScope) {
    $scope.name = 'myCtrl01';
    console.log($scope);
    console.log($rootScope);
    $rootScope.schoolName = "Tarena";
  })

  app.controller('myCtrl02', function ($scope){
    console.log($scope);
    $scope.age = 10;
  });

  app.controller('myCtrl03', function ($scope) {

  })

</script>
</body>
</html>

方法三：触发事件传递参数

绑定事件：
$scope.$ on(‘事件名称’,function(event,data){})
触发事件：
//从子作用对象向父作用域对象传递事件
$scope.$ emit()
//从父作用对象向子作用域对象传递事件
$scope.$ broadcaset()
如下例：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script>
</head>
<body>

<div ng-controller="myCtrl01">
  <button ng-click="sendToChild()">
    向myCtrl02传递参数
  </button>
  <div ng-controller="myCtrl02">
    <button ng-click="sendToParent()">向父作用域传数据</button>
  </div>
</div>

<script>
  var app = angular.module('myApp', ['ng']);

  app.controller('myCtrl01', function ($scope) {
    $scope.sendToChild = function () {
      $scope.$broadcast('event1','hello')
    }

    $scope.$on('event2', function (event,data) {
      console.log('data from son is '+data);
    })
  });
  app.controller('myCtrl02', function ($scope) {

    //绑定一个event1的事件
    $scope.$on('event1', function (event,data) {
      console.log('myCtrl02 rev data is '+data);
    })

    $scope.sendToParent = function () {
//      通过$emit方法向父级元素触发事件，同时传递数据
      $scope.$emit('event2','Hello Parent')

    }

  });

</script>
</body>
</html>