angularjs控制器

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

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

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

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

方式1:借助于$rootScope

借助于scoperootScope之间的关系。
把要共享的数据存在$rootScope,所有的子对象就可以读取该数据
scopeid2id1rootScope是根作用域对象,其余的scoperootScope是scoperootScope时id为1.所有的scopeid2scope与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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值