對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>

運行結(jié)果：

angularJs controller scope

二、繼承但不隔離

在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>

運行結(jié)果：

angularJs controller scope

以上這篇對angularJs中controller控制器scope父子集作用域的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

使用angular幫你實現(xiàn)拖拽的示例
下面小編就為大家?guī)硪黄褂胊ngular幫你實現(xiàn)拖拽的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Angular.js去除頁面中顯示的空行方法示例
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細的示例代碼供大家參考學習，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-03-03
詳解angular中如何監(jiān)控dom渲染完畢
AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁Web應用。這篇文章主要介紹了詳解angular中如何監(jiān)控dom渲染完畢，有興趣的可以了解一下。
2017-01-01
angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法，需要的的朋友參考下
2017-01-01
Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。這篇文章主要介紹了Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié),需要的朋友可以參考下
2018-09-09
Angular模版驅(qū)動表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動表單的使用總結(jié)，本文實現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗，狀態(tài)管理，非常具有實用價值，需要的朋友可以參考下
2018-05-05
Angular.Js中過濾器filter與自定義過濾器filter實例詳解
Angularjs過濾器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定義過濾器，所以下面這篇文章主要給大家介紹了Angular.Js中過濾器filter與自定義過濾器filter的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05
Angular2中Bootstrap界面庫ng-bootstrap詳解
不知道大家有沒有留意，最近angular-ui團隊終于正式發(fā)布了基于 Angular2的Bootstrap界面庫ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ，因此對這個ng-bootstrap 也是很感興趣，所以第一時間進行試用。這篇文章就給大家詳細介紹下ng-bootstrap。
2016-10-10
Angular刷新當前頁面的實現(xiàn)方法
這篇文章主要介紹了Angular刷新當前頁面的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
angularjs中ng-bind-html的用法總結(jié)
這篇文章主要介紹了angularjs中ng-bind-html的用法總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05