angularJS（4）

一：angulaJs的作用域scope

Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
Scope 可應用在視圖和控制器上。
AngularJS 應用組成如下 :$scope是一個模型
View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數據。
Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。

在之前的內容中說到的都是只有一個作用域的，但是在大型的項目當中，可能會存在多個的作用域

如下面的例子：

<div ng-app="myapp">
     <h1  style="color:#ff0000" ng-controller="mycc">{{myname}}</h1>
    <h1 ng-controller="ucc">{{myname}}</h1>
</div>
<script language="javascript">
 var app=angular.module("myapp",[]);
 app.controller("mycc",function($scope){
     $scope.myname="豬八戒";
 })
 app.controller("ucc",function($scope){
     $scope.myname="唐三藏";
 })
</script>

二：angularJs的根作用域

所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中

$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個 controller 中使用。

如下面的例子：

<div ng-app="myapp">
    <h1 style="color:#f00" ng-controller="mycc">姓名:{{uname}},性別:{{usex}}</h1>
    <h1 style="color:#00f" ng-controller="ucc">姓名：{{uname}},性別：{{usex}}</h1>
</div>
<script language="javascript">
 var app=angular.module("myapp",[]);
 app.controller("mycc",function($scope,$rootScope){
       $scope.uname="金角大王";
       $rootScope.uname=$scope.uname;
       $scope.usex="公";
     })
 app.controller("ucc",function($scope,$rootScope){
      $scope.uname=$rootScope.uname;
      $scope.usex="母"
     })
</script>
轉