這篇文章主要為大家展示了“AngularJs之$scope對象的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“AngularJs之$scope對象的示例分析”這篇文章吧。

一、作用域

AngularJs中的$scope對象是模板的域模型,也稱為作用域?qū)嵗?通過為其屬性賦值,可以傳遞數(shù)據(jù)給模板渲染.

每個(gè)$scope都是Scope類的實(shí)例,Scope類有很多方法,用于控制作用域的生命周期、提供事件傳播功能,以及支持模板的渲染等.

AngularJs的每個(gè)應(yīng)用程序都有一個(gè)$rootScope,它是其他所有作用域的父作用域,它的作用范圍從包含ng-app指令的HTML元素開始.它是在新應(yīng)用啟動(dòng)時(shí)自動(dòng)創(chuàng)建.

二、指令創(chuàng)建作用域

ng-controller指令是作用域創(chuàng)建指令,當(dāng)在DOM樹中遇到作用域創(chuàng)建指令時(shí),AngularJs都會(huì)創(chuàng)建Scope類的新實(shí)例$scope.新創(chuàng)建的作用域?qū)嵗?scope會(huì)擁有$parent屬性,并指向它的父作用域.在DOM樹中,會(huì)有很多這樣的指令創(chuàng)建出很多作用域.

(眾多作用域形成了以$rootScope為根的樹結(jié)構(gòu),鑒于DOM樹驅(qū)動(dòng)了作用域的創(chuàng)建,作用域樹模仿了DOM樹的結(jié)構(gòu))

ng-repeat指令的運(yùn)用:

  

    

    

  

  

    

    

      {{country.name}} 有 {{country.population}} 人口

    

    


    世界人口數(shù)：{{population}}

    

 

  

  

  

  

myapp.js

var app = angular.module("myApp",[]);

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

  $scope.population = 7000;

  $scope.countries = [

    {name: 'France',population:63.1},

    {name: 'UK',population: 61.8},

  ];
});

測試結(jié)果：

ng-repeat指令用來遍歷屬性值,上面對應(yīng)每個(gè)country,都有個(gè)新變量要暴露給$scope,而又沒有覆蓋之前變量的值;AngularJs中給集合中的每個(gè)元素都創(chuàng)建了新的作用域,所以在不同作用域中,定義同名變量,不會(huì)造成命名的沖突(不同的DOM元素指向不同的作用域,并使用各自作用域中的變量渲染模板).這相當(dāng)于集合中每個(gè)項(xiàng)目都有自己的命名空間.

三、作用域?qū)蛹?jí)和繼承

作用域中定義的屬性對于所有子作用域是可見的，只要子作用域中沒有定義同名的屬性.

實(shí)例：

  

    

    

  

  

    
Hello,{{name}}

    

     Say hello to:

     
Hello,{{name}}!!