對(duì)angularJs中controller控制器scope父子集作用域的實(shí)例講解

發(fā)布時(shí)間：2020-10-16 15:06:08 來源：腳本之家閱讀：161 作者：泠泠在路上欄目：web開發(fā)

1.ctrl1是父級(jí)控制器，ctrl2和ctrl3都是ctrl1的子級(jí)控制器，

2.父級(jí)ctrl1中name值的改變會(huì)影響ctrl2和ctrl3中name值的改變，

3.但是ctrl2有自己的name輸入傳的值，不會(huì)影響ctrl1和ctrl3，這就是繼承隔離，

4.ctrl3無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é)果：

對(duì)angularJs中controller控制器scope父子集作用域的實(shí)例講解

二、繼承但不隔離

在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í)例講解

以上這篇對(duì)angularJs中controller控制器scope父子集作用域的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

對(duì)angularJs中controller控制器scope父子集作用域的實(shí)例講解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽