AnjularJS中$scope和$rootScope的區(qū)別小結(jié)

更新時(shí)間：2016年09月18日 10:40:31 投稿：daisy

這篇文章給大家整理了關(guān)于AnjularJS中$scope和$rootScope的區(qū)別，文中運(yùn)用實(shí)例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。

一句話總結(jié)：

$rootScope針對(duì)全局的作用域生效

$scope只針對(duì)當(dāng)前的controller作用域生效

用下面的例子來(lái)證明上述的說(shuō)法：

定義一個(gè)模塊名為myApp

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

創(chuàng)建oneController和twoController這兩個(gè)controller

oneController傳入$scope和$rootScope

myApp.controller('oneController', ['$scope', '$rootScope', function ($scope, $rootScope) {
 // 局部的變量，只有在oneController中才會(huì)顯示
 $scope.one_language = 'Python';

 // 全局的變量，都可以調(diào)用
 $rootScope.language = 'Go';
}]);

twoController只傳入$scope

myApp.controller('twoController', ['$scope', function ($scope) {
 // 局部的變量，只有在twoController中才會(huì)顯示
 $scope.two_language = 'Java';
}]);

HTML標(biāo)簽內(nèi)容

<span ng-app="myApp">
  <style>
    div{margin-top: 15px;border: 2px solid rebeccapurple;width: 400px;}
  </style>
  <div>
    <h3>我是全局變量language: {{ language}}</h3>
  </div>
  <div ng-controller="oneController">
    <h3>我是one_language局部變量: {{ one_language}}</h3>
  </div>
  <div ng-controller="twoController">
    <h1>twoController</h1>
    <h3>我是two_language局部變量: {{ two_language }}</h3>
    <h3>我是one_language局部變量: {{ one_language}}</h3>
    <h3>我是全局變量language: {{ language }}</h3>
  </div>
</span>

顯示的結(jié)果

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容，請(qǐng)仔細(xì)看看上面的代碼，這有助于你理解。如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
AngularJS 中的指令實(shí)踐開發(fā)指南(一)
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令。這篇教程會(huì)為你講述如何自定義指令，以及介紹如何在實(shí)際項(xiàng)目中使用
2016-03-03
indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)
這篇文章主要介紹了indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)的相關(guān)資料,需要的朋友可以參考下
2016-06-06
Angular2開發(fā)環(huán)境搭建教程之VS Code
不久前WebStorm的頻繁卡死終于讓我受不鳥了,我決定換個(gè)輕量級(jí)的編輯器，嘗試了Emacs、Sublime text,最后選擇了vscode。下面這篇文章主要給大家介紹了關(guān)于Angular2開發(fā)環(huán)境搭建教程之VS Code的相關(guān)資料，需要的朋友可以參考下。
2017-12-12
Angular封裝搜索框組件操作示例
這篇文章主要介紹了Angular封裝搜索框組件操作,結(jié)合實(shí)例形式分析了基于Angular組件庫(kù)實(shí)現(xiàn)搜索功能的封裝操作相關(guān)實(shí)現(xiàn)步驟與注意事項(xiàng),需要的朋友可以參考下
2019-04-04
AngulaJS路由 ui-router 傳參實(shí)例
本篇文章主要介紹了AngulaJS路由 ui-router 傳參實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
AngularJS 視圖詳解及示例代碼
本文主要介紹AngularJS 視圖，這里整理了相關(guān)知識(shí)，并附代碼示例和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下
2016-08-08
AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-05-05
Angular.js ng-file-upload結(jié)合springMVC的使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-07-07
Angular之指令Directive用法詳解
本篇文章主要介紹了Angular之指令Directive系列詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03