對(duì)angularJs中controller控制器scope父子集作用域的實(shí)例講解
更新時(shí)間：2018年10月08日 10:24:52 作者：泠泠在路上
今天小編就為大家分享一篇對(duì)angularJs中controller控制器scope父子集作用域的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
1.ctrl1是父級(jí)控制器，ctrl2和ctrl3都是ctrl1的子級(jí)控制器，
2.父級(jí)ctrl1中name值的改變會(huì)影響ctrl2和ctrl3中name值的改變，
3.但是ctrl2有自己的name輸入傳的值，不會(huì)影響ctrl1和ctrl3，這就是繼承隔離，
4.ctrl3無(wú)name賦值就繼承父級(jí)ctrl1中的name的值。
一、繼承隔離的情況
<div ng-app="module">
<div ng-controller="ctrl1">
{{name}}<input type="text" ng-model="name">
<div ng-controller="ctrl2">
{{name}}<input type="text" ng-model="name">
</div>
<div ng-controller="ctrl3">
{{name}}
</div>
</div>
</div>
<script>
var m = angular.module('module', []);
m.controller('ctrl1', ['$scope', function ($scope) {
$scope.name = '泠泠在路上'
}]);
m.controller('ctrl2', ['$scope', function ($scope) {
}]);
m.controller('ctrl3', ['$scope', function ($scope) {
}]);
</script>
運(yùn)行結(jié)果：
二、繼承但不隔離
在ctrl2中改變name的值，既影響自己的值，也影響父級(jí)的值。
代碼：
<div ng-app="module">
<div ng-controller="ctrl1">
{{data.name}}<input type="text" ng-model="data.name">
<div ng-controller="ctrl2">
{{data.name}}<input type="text" ng-model="data.name">
</div>
<div ng-controller="ctrl3">
{{data.name}}
</div>
</div>
</div>
<script>
var m = angular.module('module', []);
m.controller('ctrl1', ['$scope', function ($scope) {
/* 定義對(duì)象*/
$scope.data={name:'泠泠在路上'}
}]);
m.controller('ctrl2', ['$scope', function ($scope) {
}]);
m.controller('ctrl3', ['$scope', function ($scope) {
}]);
</script>
運(yùn)行結(jié)果：
以上這篇對(duì)angularJs中controller控制器scope父子集作用域的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶登錄詳解
這篇文章主要介紹了Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶登錄的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
AngularJS動(dòng)態(tài)綁定HTML的方法分析
這篇文章主要介紹了AngularJS動(dòng)態(tài)綁定HTML的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)動(dòng)態(tài)綁定HTML的相關(guān)操作指令用法與使用注意事項(xiàng),需要的朋友可以參考下2016-11-11
詳解AngularJS驗(yàn)證、過(guò)濾器、指令
這篇文章主要介紹了AngularJS驗(yàn)證、過(guò)濾器、指令的相關(guān)知識(shí),angularJS中提供了許多的驗(yàn)證指令，可以輕松的實(shí)現(xiàn)驗(yàn)證，具體詳情大家通過(guò)本文一起學(xué)習(xí)吧，需要的朋友可以參考下2017-01-01
在本章中將討論事件綁定在Angular7中的工作方式,當(dāng)用戶以鍵盤移動(dòng),鼠標(biāo)單擊或鼠標(biāo)懸停的形式與應(yīng)用程序交互時(shí),它將生成一個(gè)事件,需要處理這些事件以執(zhí)行某種操作,考慮一個(gè)示例以更好地理解這一點(diǎn)2023-12-12
這篇文章主要介紹了Angular中的interceptors攔截器,需要的朋友可以參考下2017-06-06
本篇文章主要主要介紹了angularjs之$timeout指令詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
本文通過(guò)示例向大家介紹了AngularJS語(yǔ)法的使用，小伙伴們認(rèn)真研讀下吧，非常的實(shí)用哦。2015-01-01
這篇文章主要介紹了Angularjs 事件指令詳細(xì)整理的相關(guān)資料,這里對(duì)AngularJS 的所有的事件指令一一做出詳細(xì)介紹，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了angularJS 中input示例分享,需要的朋友可以參考下2015-02-02
angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12