詳細(xì)談?wù)凙ngularJS的子級作用域問題

更新時(shí)間：2016年09月05日 14:43:37 作者：MakingChoice

大家在使用angularjs的時(shí)候，很容易忽略AngularJS自帶指令的作用域問題，有一些指令會產(chǎn)生獨(dú)立的自己作用域，造成子級無法與父級作用域雙向綁定的問題。下面我們來看看這些問題，有需要的可以參考借鑒。

前言

AngularJS自帶指令目前有ng-include、ng-view、ng-switch、ng-repeat。這樣的原因是因?yàn)椋@些指令雖然是AngularJS內(nèi)部定義的，但是也是和directive實(shí)現(xiàn)的方法都是一樣的，其內(nèi)部使用的是scope:true的方式，子作用域繼承了父級的作用，并且構(gòu)建了一個(gè)獨(dú)立的子作用域，所有雙向綁定實(shí)現(xiàn)不了，只能單獨(dú)實(shí)現(xiàn)子級作用域繼承父級的屬性。

AngularJS的繼承是通過javascript的原型繼承方式實(shí)現(xiàn)的，進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上。因?yàn)樵玩湹臋z索只會在屬性檢索的時(shí)候觸發(fā)，不會在改變屬性值的時(shí)候觸發(fā)。所以我們需要把原始類型轉(zhuǎn)換成對象，把值綁定在對象的屬性上。

大家可以在示例上看到，經(jīng)過改造之后，就可以實(shí)現(xiàn)子級修改父級作用域的屬性。原始類型只能繼承父類的作用域。

實(shí)現(xiàn)方法目前看有三種，下面一次來介紹

通過給父級scope上添加{}來實(shí)現(xiàn)，把原始類型轉(zhuǎn)換成對象。

代碼如下：

<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="lib/angular.min.js" type="text/javascript"></script>
 <style>
 .inputOne{
  width: 100px;
  height: 50px;
  background: skyblue;
 }
 .inner{
  border: 1px solid skyblue;
  width: 200px;
  height: 150px;
 }
 .outer{
  border: 1px solid salmon;
  width: 200px;
  height: 150px;
 }
 .sco{
  background: skyblue;
 }
 </style>
</head>
<body ng-controller="childCon">
 <div class="inner">
 <h3>父級作用域</h3>
 <span>{{vm.private1}}</span>
 <span>{{vm.private2}}</span>
 </div>
 <div class="outer">
 <h3>自己作用域</h3>
 <div class="one" ng-include src="'one.html'"></div>
 <div class="two" ng-include src="'two.html'"></div>
 </div>
</body>
<script>
 var app=angular.module("childScope",['template'])
  .controller("childCon",["$scope", function ($scope) {
  var vm=$scope.vm={};
  vm.private1=12;
  vm.private2=13;
  $scope.test=123;
  }]);
 var template=angular.module("template",[])
  .run(["$templateCache", function ($templateCache) {
  $templateCache.put("one.html","" +
   "<div><input type='text' ng-model='vm.private1'/></div>")
  }])
  .run(["$templateCache", function ($templateCache) {
  $templateCache.put("two.html","" +
   "<div><input type='text' ng-model='vm.private2'/>" +
   "<div class='sco'><span>原始類型</span>{{test}}</div>" +
   "</div>")
  }])
</script>
</html>

通過controller as語法來實(shí)現(xiàn)

controller as其實(shí)相當(dāng)于controller的示例對象，原理還是把原始類型轉(zhuǎn)換成對象類型。

<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="lib/angular.min.js" type="text/javascript"></script>
 <style>
 .inputOne{
  width: 100px;
  height: 50px;
  background: skyblue;
 }
 .inner{
  border: 1px solid skyblue;
  width: 200px;
  height: 150px;
 }
 .outer{
  border: 1px solid salmon;
  width: 200px;
  height: 150px;
 }
 .sco{
  background: skyblue;
 }
 </style>
</head>
<body ng-controller="childCon as vm">
 <div class="inner">
 <h3>父級作用域</h3>
 <span>{{vm.private1}}</span>
 <span>{{vm.private2}}</span>
 </div>
 <div class="outer">
 <h3>自己作用域</h3>
 <div class="one" ng-include src="'one.html'"></div>
 <div class="two" ng-include src="'two.html'"></div>
 </div>
</body>
<script>
 var app=angular.module("childScope",['template'])
  .controller("childCon",["$scope", function ($scope) {
  this.private1=12;
  this.private2=22;
  $scope.test=123;
  }]);
 var template=angular.module("template",[])
  .run(["$templateCache", function ($templateCache) {
  $templateCache.put("one.html","" +
   "<div><input type='text' ng-model='vm.private1'/></div>")
  }])
  .run(["$templateCache", function ($templateCache) {
  $templateCache.put("two.html","" +
   "<div><input type='text' ng-model='vm.private2'/>" +
   "<div class='sco'><span>原始類型</span>{{test}}</div>" +
   "</div>")
  }])
</script>
</html>

使用$parent.name調(diào)用內(nèi)部方法來實(shí)現(xiàn)。

進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上，這是JavaScript的特性。

AngularJS的作用域還存在如下內(nèi)部定義的關(guān)系：

scope.$parent指向scope的父作用域；

scope.$$childHead指向scope的第一個(gè)子作用域；

scope.$$childTail指向scope的最后一個(gè)子作用域；

scope.$$nextSibling指向scope的下一個(gè)相鄰作用域；

scope.$$prevSibling指向scope的上一個(gè)相鄰作用域；

通過在子級作用域中使用scope.$parent.name，來獲取對父級作用域的雙向綁定。

示例如下：

<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="lib/angular.min.js" type="text/javascript"></script>
 <style>
 .inputOne{
  width: 100px;
  height: 50px;
  background: skyblue;
 }
 .inner{
  border: 1px solid skyblue;
  width: 200px;
  height: 150px;
 }
 .outer{
  border: 1px solid salmon;
  width: 200px;
  height: 150px;
 }
 .sco{
  background: skyblue;
 }
 </style>
</head>
<body ng-controller="childCon">
 <div class="inner">
 <h3>父級作用域</h3>
 <span>{{private1}}</span>
 <span>{{private2}}</span>
 </div>
 <div class="outer">
 <h3>自己作用域</h3>
 <div class="one" ng-include src="'one.html'"></div>
 <div class="two" ng-include src="'two.html'"></div>
 </div>
</body>
<script>
 var app=angular.module("childScope",['template'])
  .controller("childCon",["$scope", function ($scope) {
  $scope.private1=12;
  $scope.private2=22;
  $scope.test=123;
  }]);
 var template=angular.module("template",[])
  .run(["$templateCache", function ($templateCache) {
  $templateCache.put("one.html","" +
   "<div><input type='text' ng-model='$parent.private1'/></div>")
  }])
  .run(["$templateCache", function ($templateCache) {
  $templateCache.put("two.html","" +
   "<div><input type='text' ng-model='$parent.private2'/>" +
   "<div class='sco'><span>原始類型</span>{{test}}</div>" +
   "</div>")
  }])
</script>
</html>

總結(jié)

以上就是AngularJS子級作用域問題的全部內(nèi)容，希望對大家學(xué)習(xí)和工作能有所幫助。大家如果有什么疑問，歡迎提出來。

您可能感興趣的文章: