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屬性詳解全部內容了，希望大家多多支持武林網~