1. 程式人生 > >ng $scope與$rootScope的關系

ng $scope與$rootScope的關系

調用 rom utf-8 dct style meta 無法 script scope

$scope與$rootScope的關系:
①不同的控制器之間 是無法直接共享數據
②$scope是$rootScope的子作用域對象
$scope的id是隨著控制器的加載順序依次遞增,$rootScope的id是1

③不同控制器之間如何通信??
1、借助於$rootScope
2、既然子作用域對象可以調用父作用域對象的值或者方法,就可以通過控制器之間的嵌套來實現通信
3、事件
父-》子
$scope.$broadcast(‘eventName‘,args)

子-》父
$scope.$emit(‘eventName‘,args)

綁定事件:
$scope.$on(‘eventName‘,func)

效果:

技術分享

代碼:

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

<div ng-controller="parentCtrl">
  <button ng-click="toChild()">
    向child傳值
  
</button> <div ng-controller="childCtrl"> <p>{{data}}</p> <button ng-click="toParent()">向parent傳值</button> </div> </div> <script> var app = angular.module(myApp, [ng]); app.controller(parentCtrl, function ($scope) { $scope.toChild
= function () { //通過事件傳值 約定事件名稱:toChildEvent $scope.$broadcast( toChildEvent, msg from parent) } //綁定toParentEvent事件的處理函數 $scope.$on(toParentEvent, function (event, result) { console.log(result); }) }); app.controller(childCtrl, function ($scope) { //綁定事件 $on $scope.$on(toChildEvent, function (event, result) { console.log(arguments); $scope.data = result; }); $scope.toParent = function () { //向父級元素通過事件傳值 $emit 約定:toParentEvent $scope.$emit( toParentEvent, msg to my parent ); } }); </script> </body> </html>

ng $scope與$rootScope的關系