淺談AngularJs指令之scope屬性詳解_AngularJS

AngularJS使用directive()方法類定義一個指令：

.directive("name",function(){  return{      };})

上面是定義一個指令的主體架構，該方法接受兩個參數：

1、第一個參數：name表示定義的指令的名稱（angularjs會用這個name註冊這個指令）

2、第二個參數：函數，該番薯必須返回一個對象或者一個函數，但通常我們會返回一個對象。return後接的就是返回的對象。

在返回的對象中有一個scope屬性，這個屬性用來修飾指令的範圍。

每次在註冊一個指令的時候，這個指令都會考慮一個問題，我們用我自己所在範圍呢，還是建立一個從父範圍繼承的子範圍呢，

還是建立一個隔離的範圍呢（不依賴外部的範圍）；

scope屬性的值為false，true，{ } 分別對應著上面的所在範圍，子範圍，隔離範圍。

我們舉三個例子讓我們徹底明白這幾個屬性的用法。

1、scope：false

html代碼：

<div ng-controller="myController">  <div>    <span>我的名字是</span><span ng-bind="name"></span><br/>    <span>我的年齡是</span><span ng-bind="age"></span>    <div my-directive></div>  </div></div><script>  angular.module("app",[])    .controller("myController",function($scope){      $scope.name = "kobe";      $scope.age = 39;    })    .directive("myDirective",function(){      return{        scope:false,        restrict:"A",        template:"<div><h1>下面的部分是我們建立指令時產生的</h1>"+            "我的名字是:<span ng-bind='name'></span><br/>"+            "我的年齡是:<span ng-bind='age'></span><br/>"+            "輸入你的新名字:<input type='text' ng-model='name'>"+            "</div>"      };    })</script>

效果：

這時，指令的範圍是和myController的範圍是相同的，因此當我們在輸入框中輸入新的名字時，上下兩處的名字都會跟著變動，如下圖所示：

2、scope：true

這時剛進入頁面的效果，當我們在輸入框輸入新的名字時，就會發生和第一個實驗不一樣的效果，如圖所示：

這裡，上部分的名字沒有發生改變，而下面的名字發生了改變。

這個實驗中，有兩點需要我們注意下：

1、剛進入或重新整理完頁面後，上下的名字都是一樣是因為：scope為true時，子範圍繼承了父作用的屬性和方法。因此雖然子範圍中沒有定義name和age，

但是能從父範圍的myController中繼承。因此，上下顯示了相同的名字和年齡。

2、輸入新名字後，上不變、下變得原因是：我們修改的是子範圍上的name和age，因此下面的名字會改變，上面的名字屬於父範圍，父範圍是不能訪問子範圍的，

因此上面的名字的值不會改變。

3、scope：{ }

指令的scope部分做如下修改：

scope:{  name:"@",  age:"@"},

這時，載入頁面的效果會變為：

我們會發現下面的名字和年齡並沒有值，這時因為現在的範圍是隔離的，它並不知道父範圍的屬性和方法。我們可以在指令的後面給其賦值，方法如下：

<div my-directive name="aaa" age="33"></div>

頁面的載入會變為：

當我們輸入新的名字時，效果如下

同樣的原因，這個範圍是完全隔離的，因此修改只對指令自身的範圍的屬性和方法有效，與其他任何範圍沒有關係，myController範圍的名字並不會改變。

以上就是小編為大家帶來的淺談AngularJs指令之scope屬性詳解全部內容了，希望大家多多支援雲棲社區~