如何限制指令的範圍，為什麼要這樣做呢？

Created: November-22, 2018

Scope 用作我們用於在父控制器，指令和指令模板之間進行通訊的粘合劑。每當 AngularJS 應用程式被引導時，都會建立一個 rootScope 物件。控制器，指令和服務建立的每個範圍都是從 rootScope 原型繼承的。

是的，我們可以限制指令的範圍。我們可以通過為指令建立一個獨立的範圍來實現。

有三種型別的指令範圍：

範圍：假（指令使用其父範圍）

範圍：真（指令獲得新範圍）

範圍：{}（指令獲得一個新的孤立範圍）

具有新隔離範圍的指令： 當我們建立新的隔離範圍時，它將不會從父範圍繼承。此新作用域稱為隔離作用域，因為它與其父作用域完全分離。為什麼？我們應該使用隔離範圍：當我們想要建立自定義指令時，我們應該使用隔離範圍，因為它將確保我們的指令是通用的，並放置在應用程式內的任何位置。父範圍不會干擾指令範圍。

隔離範圍示例：

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Prateek";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {},
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name'/>"
    };
});

AngularJS 為隔離範圍提供了 3 種型別的字首，它們是：

“@”（文字繫結/單向繫結）
“=”（直接模型繫結/雙向繫結）
“＆”（行為繫結/方法繫結）

所有這些字首都從指令元素的屬性接收資料，如：

<div my-directive 
  class="directive"
  name="{{name}}" 
  reverse="reverseName()" 
  color="color" >
</div>