淺談AngularJs指令之scope屬性詳解

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

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

   

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

1、第一個上是定義一個指令的主體框架，該方法接受兩個參數：

1、第一個參數：name表示定義的指令的參數：name表示定義的指令的參數：name表示定義的指令的參數：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=&#39;name&#39;></span><br/>"+
            "我的年龄是:<span ng-bind=&#39;age&#39;></span><br/>"+
            "输入你的新名字:<input type=&#39;text&#39; ng-model=&#39;name&#39;>"+
            "</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作用域的名字並不會改變。

🎜🎜