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

示例

创建具有隔离范围的自定义指令会将指令内部的范围与外部范围分开，以防止我们的指令意外更改父范围中的数据并限制其从父范围中读取私有数据。

要创建隔离的作用域并仍然允许我们的自定义指令与外部作用域通信，我们可以使用scope选项来描述如何将指令的内部作用域与外部作用域之间的映射。

实际绑定是通过附加到指令的附加属性进行的。绑定设置是使用scope选项定义的，而对象是具有键值对的对象：

• 一个key，它对应于我们指令的隔离范围属性

• 一个值，该值告诉Angular如何将指令内部范围绑定到匹配的属性

具有隔离范围的指令的简单示例：

var ProgressBar = function() {
  return {
    scope: { // 这就是我们定义隔离范围的方式
      current: '=', // 通过使用'current'属性创建所需的双向绑定
      full: '=?maxValue' // 创建一个可选的（请注意“？”）：在我们的指令隔离范围内，使用“ max-value”属性到“ full”属性的双向绑定 
    }
    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>