带模板和隔离范围的基本指令

创建一个自定义指令隔离范围将分离的范围内从该指令以外的范围，以防止我们的指令意外改变数据在父范围，从父范围读取私人数据限制它。

要创建一个独立的作用域并仍然允许我们的自定义指令与外部作用域通信，我们可以使用 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>