AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域
Controller的創(chuàng)建
AngularJs controller使用無處不在,在里代碼演示比較簡單的創(chuàng)建工作。
<!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-"/> <title>App</title> <script src="angular.js"></script> <link href="bootstrap-theme.css" rel="stylesheet" /> <link href="bootstrap.css" rel="stylesheet" /> <script> angular.module("exampleApp", []) .controller("defaultCtrl", function ($scope) { $scope.setInput = function (value) { console.log("print:" + value); } }); </script> </head> <body ng-controller="defaultCtrl"> <div class="well"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="setInput(value)">Click</button> </div> </div> </body> </html>
在這控制很簡單,首先我在html 中添加了 ng-app 屬性,表示module的作用范圍。
在 body 中添加了 ng-controller 表示 defaultCtrl 控制器的作用范圍。
input 便簽中ng-model 指令的是綁定數(shù)據(jù),雙向數(shù)據(jù)綁定(MVVM)。
$scope 是AngularJs內(nèi)置的作用域。
此實(shí)例的只是把輸入的值打印到控制臺中,如圖:
僅此而已,簡單吧。
多個(gè)控制器controller作用域問題
現(xiàn)在我們來改造下程序,
<body > <div class="well" ng-controller="defaultCtrl"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="setInput(value)">Click</button> </div> </div> <div class="well" ng-controller="defaultCtrl"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="setInput(value)">Click</button> </div> </div> </body>
其余代碼不變,我只是把放到body 中的屬性 ng-controller 放到了兩個(gè)div中。我重用了defaultCtrl控制器,猜想下,如果我在第一個(gè)input標(biāo)簽輸入內(nèi)容,我點(diǎn)擊第二個(gè)控制器的button按鈕,會出現(xiàn)你所期望的結(jié)果嗎?
結(jié)果是否和你想你的一樣呢,大家可以看到這個(gè)結(jié)果為undefined. 在個(gè)很好解釋,應(yīng)為他們的作用域不同,雖然你重復(fù)使用了統(tǒng)一控制器,但是在創(chuàng)建作用域確實(shí)不同的。
調(diào)用的工廠函數(shù)會返回不同的作用域。
那么如何進(jìn)行不同作用域之間的訪問呢,在Angularjs中對于作用域訪問有個(gè)$rootScope 。
在這里有三個(gè)函數(shù)需要介紹下,
$on(name,handler) 注冊一個(gè)事件處理函數(shù),該函數(shù)在特定的事件被當(dāng)前作用域收到時(shí)將被調(diào)用。
$emit(name,args) 向當(dāng)前父作用域發(fā)送一個(gè)事件,直至根作用域。
$broadcast(name,args) 向當(dāng)前作用域下的子作用域發(fā)送一個(gè)事件,參數(shù)是事件名稱以及一個(gè)用于作用向事件提供額外數(shù)據(jù)的對象。
現(xiàn)在來更改下代碼:
<script> angular.module("exampleApp", []) .controller("defaultCtrl", function ($scope,$rootScope) { $scope.$on("UpdateValue", function (event, args) { $scope.input = args.zip; }); $scope.setInput = function (value) { $rootScope.$broadcast("UpdateValue", { zip: value }); console.log("print:" + $scope.input); } $scope.copy = function () { console.log("copy:" + $scope.input); }; }); </script> <div class="well" ng-controller="defaultCtrl"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="copy()">Copy</button> </div> </div>
在段代碼中我添加了幾個(gè)函數(shù),同時(shí)改變了第二個(gè)控制器的函數(shù)。
結(jié)果:
確實(shí)發(fā)生了。
controller繼承
<script> angular.module("exampleApp", []) .controller("defaultCtrl", function ($scope, $rootScope) { //$scope.$on("UpdateValue", function (event, args) { // $scope.input = args.zip; //}); $scope.setInput = function (value) { //$rootScope.$broadcast("UpdateValue", { zip: value }); $scope.input = value; console.log("print:" + $scope.input); } $scope.copy = function () { console.log("copy:" + $scope.input); }; }) .controller("simpleCtrl", function ($scope) { $scope.copy = function () { console.log("copy:" + $scope.input); }; }); </script> <body ng-controller="defaultCtrl"> <div class="well"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="setInput(value)">Click</button> </div> </div> <div class="well" ng-controller="simpleCtrl"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="copy()">Copy</button> </div> </div> </body>
我添加了一個(gè)控制器,simpleCtrl 仔細(xì)觀察下,發(fā)現(xiàn)defaultCtrl 包含了simpleCtrl 中,所以作用simple 也繼承 了。
結(jié)果圖:發(fā)下我在第一個(gè)窗中輸入時(shí),第二個(gè)也變了,應(yīng)為都是同一個(gè)value。
$scope 作用域問題,在使用controller時(shí) 要明白其作用域。
相關(guān)文章
AngularJs篇:使用AngularJs打造一個(gè)簡易權(quán)限系統(tǒng)的實(shí)現(xiàn)代碼
本篇文章主要介紹了AngularJs篇:使用AngularJs打造一個(gè)簡易權(quán)限系統(tǒng)的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達(dá)到目的地之前對其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器,每個(gè)攔截器都是實(shí)現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請求詳析
這篇文章主要給大家介紹了關(guān)于如何使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請求的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用RxJS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Angular.JS中的指令引用template與指令當(dāng)做屬性詳解
這篇文章主要介紹了Angular.JS中的指令引用template與指令當(dāng)做屬性的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03ios設(shè)備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular2學(xué)習(xí)教程之ng中變更檢測問題詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測問題的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-05-05Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實(shí)例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下2016-08-08