AngularJs學習第五篇從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)置的作用域。
此實例的只是把輸入的值打印到控制臺中,如圖:
僅此而已,簡單吧。
多個控制器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 放到了兩個div中。我重用了defaultCtrl控制器,猜想下,如果我在第一個input標簽輸入內(nèi)容,我點擊第二個控制器的button按鈕,會出現(xiàn)你所期望的結(jié)果嗎?
結(jié)果是否和你想你的一樣呢,大家可以看到這個結(jié)果為undefined. 在個很好解釋,應(yīng)為他們的作用域不同,雖然你重復使用了統(tǒng)一控制器,但是在創(chuàng)建作用域確實不同的。
調(diào)用的工廠函數(shù)會返回不同的作用域。
那么如何進行不同作用域之間的訪問呢,在Angularjs中對于作用域訪問有個$rootScope 。
在這里有三個函數(shù)需要介紹下,
$on(name,handler) 注冊一個事件處理函數(shù),該函數(shù)在特定的事件被當前作用域收到時將被調(diào)用。
$emit(name,args) 向當前父作用域發(fā)送一個事件,直至根作用域。
$broadcast(name,args) 向當前作用域下的子作用域發(fā)送一個事件,參數(shù)是事件名稱以及一個用于作用向事件提供額外數(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>
在段代碼中我添加了幾個函數(shù),同時改變了第二個控制器的函數(shù)。
結(jié)果:
確實發(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>
我添加了一個控制器,simpleCtrl 仔細觀察下,發(fā)現(xiàn)defaultCtrl 包含了simpleCtrl 中,所以作用simple 也繼承 了。
結(jié)果圖:發(fā)下我在第一個窗中輸入時,第二個也變了,應(yīng)為都是同一個value。
$scope 作用域問題,在使用controller時 要明白其作用域。
相關(guān)文章
AngularJs篇:使用AngularJs打造一個簡易權(quán)限系統(tǒng)的實現(xiàn)代碼
本篇文章主要介紹了AngularJs篇:使用AngularJs打造一個簡易權(quán)限系統(tǒng)的實現(xiàn)代碼,具有一定的參考價值,有興趣的可以了解一下。2016-12-12詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標達到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器,每個攔截器都是實現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12Angular.JS中的指令引用template與指令當做屬性詳解
這篇文章主要介紹了Angular.JS中的指令引用template與指令當做屬性的相關(guān)資料,文中介紹的非常詳細,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03ios設(shè)備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下2016-08-08