對angularJs中controller控制器scope父子集作用域的實例講解

2019-11-19 12:47:03

字體：大中小

來源：轉載

供稿：網友

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>

運行結果：

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>

運行結果：

angularJs controller scope