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