AngularJs之$scope對(duì)象的示例分析

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

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出延慶免費(fèi)做網(wǎng)站回饋大家。

一、作用域

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

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

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

AngularJs之$scope對(duì)象的示例分析

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

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

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

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

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

  </head>

  <body >

    <ul ng-app="myApp" ng-controller="WorldCtrl">

    <li ng-repeat="country in countries">

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

    </li>

    <hr>

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

    </ul>

 

  </body>

  <script type="text/javascript" src="js/angular.js" ></script>

  <script src="js/myapp.js"></script>

  <!--<script type="text/javascript" src="js/angularjs.js" ></script>-->

</html>

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

  ];<br>});

測(cè)試結(jié)果：

AngularJs之$scope對(duì)象的示例分析

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

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

作用域中定義的屬性對(duì)于所有子作用域是可見(jiàn)的，只要子作用域中沒(méi)有定義同名的屬性.

實(shí)例：

<!DOCTYPE html>

<html ng-app="myApp">

  <head>

    <meta charset="UTF-8">

    <title></title>

  </head>

  <body ng-init="name='world'">

    <h2>Hello,{{name}}</h2>

    <div ng-controller="HelloCtrl">

     Say hello to:<input type="text" ng-model="name">

     <h2>Hello,{{name}}!!</h2>

    </div>

  </body>

  <script type="text/javascript" src="js/angular.js" ></script>

  <script type="text/javascript" src="js/controller.js" ></script>

</html>

controller.js

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

app.controller("HelloCtrl", function($scope) {

// $scope.name = "youyi";

});

結(jié)果：

AngularJs之$scope對(duì)象的示例分析

在父作用域中定義了變量，子作用域中暫時(shí)未定義同名變量,可以看到在父作用域中定義的變量在整個(gè)應(yīng)用程序中到處可見(jiàn).

如果子作用域中有同名屬性：

AngularJs之$scope對(duì)象的示例分析

AngularJs中的作用域繼承和JavaScript中的原型繼承遵循同樣的規(guī)則（沿著繼承樹(shù)向上查找屬性，直至找到為止）。

改變子作用域中的變量值，不會(huì)對(duì)負(fù)作用域中的同名變量產(chǎn)生影響。

AngularJs之$scope對(duì)象的示例分析

通過(guò)下面的方式可以讓子作用域中影響定義在父作用域中的屬性：

但是這種方式是不可靠的，問(wèn)題在于ng-model指令所用的表達(dá)式對(duì)DOM結(jié)構(gòu)做了武斷的假設(shè),盡量避免使用$parent。

AngularJs之$scope對(duì)象的示例分析

更好的解決方案：

<!DOCTYPE html>

<html ng-app="myApp">

  <head>

    <meta charset="UTF-8">

    <title></title>

  </head>

  <body ng-init="thing={name:'world'}">

    <h2>Hello,{{thing.name}}</h2>

    <div ng-controller="HelloCtrl">

     Say hello to:<input type="text" ng-model="thing.name">

     <h2>Hello,{{thing.name}}!!</h2>

    </div>

  </body>

  <script type="text/javascript" src="js/angular.js" ></script>

  <script type="text/javascript" src="js/controller.js" ></script>

</html>

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

app.controller("HelloCtrl", function($scope) {

  $scope.name = "youyi";

});

結(jié)果：

AngularJs之$scope對(duì)象的示例分析

改變表單中的值結(jié)果如下：

AngularJs之$scope對(duì)象的示例分析

避免直接綁定變量給作用域?qū)傩?，?duì)象屬性的雙向數(shù)據(jù)綁定是最好的解決方案。

以上是“AngularJs之$scope對(duì)象的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：AngularJs之$scope對(duì)象的示例分析
URL地址：http://aaarwkj.com/article8/iihpip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站維護(hù)、網(wǎng)站內(nèi)鏈、服務(wù)器托管、域名注冊(cè)、網(wǎng)頁(yè)設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

AngularJs之$scope對(duì)象的示例分析