欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域

 更新時(shí)間:2016年06月08日 10:00:41   作者:Company  
這篇文章主要介紹了AngularJs(五)從Controller控制器談?wù)?scope作用域 的相關(guān)資料,需要的朋友可以參考下

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)文章

  • js常用正則表達(dá)式集錦

    js常用正則表達(dá)式集錦

    這篇文章主要介紹了js常用正則表達(dá)式集錦,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • AngularJs篇:使用AngularJs打造一個(gè)簡易權(quán)限系統(tǒng)的實(shí)現(xià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ù)添加攔截器的方法

    詳解為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í)請求詳析

    使用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-06
  • Angular.JS中的指令引用template與指令當(dāng)做屬性詳解

    Angular.JS中的指令引用template與指令當(dāng)做屬性詳解

    這篇文章主要介紹了Angular.JS中的指令引用template與指令當(dāng)做屬性的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。
    2017-03-03
  • Angular 7工作方式事件綁定

    Angular 7工作方式事件綁定

    在本章中將討論事件綁定在Angular7中的工作方式,當(dāng)用戶以鍵盤移動,鼠標(biāo)單擊或鼠標(biāo)懸停的形式與應(yīng)用程序交互時(shí),它將生成一個(gè)事件,需要處理這些事件以執(zhí)行某種操作,考慮一個(gè)示例以更好地理解這一點(diǎn)
    2023-12-12
  • 詳解如何在Angular優(yōu)雅編寫HTTP請求

    詳解如何在Angular優(yōu)雅編寫HTTP請求

    這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫HTTP請求,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • ios設(shè)備中angularjs無法改變頁面title的解決方法

    ios設(shè)備中angularjs無法改變頁面title的解決方法

    今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Angular2學(xué)習(xí)教程之ng中變更檢測問題詳解

    Angular2學(xué)習(xí)教程之ng中變更檢測問題詳解

    這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測問題的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例

    Angular外部使用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

最新評論