angularjs控制器

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

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

方式1:借助于$rootScope

借助于 scope rootScope之间的关系。
把要共享的数据存在$rootScope,所有的子对象就可以读取该数据
scopeid2id1 rootScope是根作用域对象,其余的 scope rootScope是 scope rootScope时id为1.所有的 scopeid2 scope与rootScope的关系如下图:angularjs控制器_第1张图片

方式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()
如下例:


<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>

你可能感兴趣的:(javascript,angularjs)