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

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

上面是定義一個指令的主體框架，該方法接受兩個參數(shù)：

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

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

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

每次在注冊一個指令的時候，這個指令都會考慮一個問題，我們用我自己所在作用域呢，還是創(chuàng)建一個從父作用域繼承的子作用域呢，

還是創(chuàng)建一個隔離的作用域呢（不依賴外部的作用域）；

scope屬性的值為false，true，{ } 分別對應(yīng)著上面的所在作用域，子作用域，隔離作用域。

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

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>下面的部分是我們創(chuàng)建指令時生成的</h1>"+
            "我的名字是:<span ng-bind='name'></span><br/>"+
            "我的年齡是:<span ng-bind='age'></span><br/>"+
            "輸入你的新名字:<input type='text' ng-model='name'>"+
            "</div>"
      };
    })
</script>

效果：

這時，指令的作用域是和myController的作用域是相同的，因此當(dāng)我們在輸入框中輸入新的名字時，上下兩處的名字都會跟著變動，如下圖所示：

2、scope：true

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

這里，上部分的名字沒有發(fā)生改變，而下面的名字發(fā)生了改變。

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

1、剛進(jìn)入或刷新完頁面后，上下的名字都是一樣是因為：scope為true時，子作用域繼承了父作用的屬性和方法。因此雖然子作用域中沒有定義name和age，

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

2、輸入新名字后，上不變、下變得原因是：我們修改的是子作用域上的name和age，因此下面的名字會改變，上面的名字屬于父作用域，父作用域是不能訪問子作用域的，

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

3、scope：{ }

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

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

這時，載入頁面的效果會變?yōu)椋?/p>

我們會發(fā)現(xiàn)下面的名字和年齡并沒有值，這時因為現(xiàn)在的作用域是隔離的，它并不知道父作用域的屬性和方法。我們可以在指令的后面給其賦值，方法如下：

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

頁面的載入會變?yōu)椋?/p>

當(dāng)我們輸入新的名字時，效果如下

同樣的原因，這個作用域是完全隔離的，因此修改只對指令自身的作用域的屬性和方法有效，與其他任何作用域沒有關(guān)系，myController作用域的名字并不會改變。

以上就是小編為大家?guī)淼臏\談AngularJs指令之scope屬性詳解全部內(nèi)容了，希望大家多多支持腳本之家~

最新評論