帶模板和隔離範圍的基本指令

建立一個自定義指令隔離範圍將分離的範圍內從該指令以外的範圍，以防止我們的指令意外改變資料在父範圍，從父範圍讀取私人資料限制它。

要建立一個獨立的作用域並仍然允許我們的自定義指令與外部作用域通訊，我們可以使用 scope 選項來描述如何將指令的內部作用域的繫結對映到外部作用域。

實際繫結是使用附加到指令的額外屬性進行的。繫結設定使用 scope 選項和具有鍵值對的物件定義：

• 一個鍵，對應於我們的指令的隔離範圍屬性

• 一個值，它告訴 Angular 如何將指令內部作用域繫結到匹配的屬性

具有隔離範圍的指令的簡單示例：

var ProgressBar = function() {
  return {
    scope: { // This is how we define an isolated scope
      current: '=', // Create a REQUIRED bidirectional binding by using the 'current' attribute
      full: '=?maxValue' // Create an OPTIONAL (Note the '?'): bidirectional binding using 'max-value' attribute to the `full` property in our directive isolated scope 
    }
    template: '<div class="progress-back">' +
              '  <div class="progress-bar"' +
              '       ng-style="{width: getProgress()}">' +
              '  </div>' + 
              '</div>',
    link: function(scope, el, attrs) {
      if (scope.full === undefined) {
        scope.full = 100;
      }
      scope.getProgress = function() {
        return (scope.current / scope.size * 100) + '%';
      }
    }
  }
}

ProgressBar.$inject = [];
angular.module('app').directive('progressBar', ProgressBar);

示例如何使用此指令並將控制器作用域中的資料繫結到指令的內部作用域：

控制器：

angular.module('app').controller('myCtrl', function($scope) {
    $scope.currentProgressValue = 39;
    $scope.maxProgressBarValue = 50;
});

檢視：

<div ng-controller="myCtrl">
    <progress-bar current="currentProgressValue"></progress-bar>
    <progress-bar current="currentProgressValue" max-value="maxProgressBarValue"></progress-bar>
</div>