Javascript angularjs中的进度处理程序

我已经用纯javascript实现了一个进度处理程序，我想知道如何使用角度数据绑定特性实现同样的效果

HTML

假设我已经实例化了一个angular应用程序，并且可以在

$scope

$scope.progress = progress;

---

我不清楚的是如何将其数据绑定到进度条（div）的宽度属性

您可以使用

ngStyle

 <div class="progress-bar" ng-style="{ 'width': progress + '%' }"></div>

---

最简单的方法是使用以下设置：

你可能想把这变成一个好主意。这样，进度条将可重复使用：

index.html

<div ng-controller="MainController">
  <progress-bar progress="myProgress"></progress-bar>
</div>

app.js

var app = angular.module('plunker', []);

app.controller('MainController', function($scope) {
  $scope.myProgress = '60';
}).directive('progressBar', function() {
  return {
    restrict: 'E',
    scope: {
      progress: '=progress'
    },
    template: '<div class="progress" ng-style="{width: progress + \'%\'}"></div>'
  };
});

var-app=angular.module（'plunker'，[]）；
应用控制器（'MainController'，功能（$scope）{
$scope.myProgress='60'；
}).directive（'progressBar'，function（）{
返回{
限制：'E'，
范围：{
进度：'=进度'
},
模板：“”
};
});

Plnk：

<div class="progress-bar" ng-style="{'width': progress + '%'}"></div>

<div ng-controller="MainController">
  <progress-bar progress="myProgress"></progress-bar>
</div>

var app = angular.module('plunker', []);

app.controller('MainController', function($scope) {
  $scope.myProgress = '60';
}).directive('progressBar', function() {
  return {
    restrict: 'E',
    scope: {
      progress: '=progress'
    },
    template: '<div class="progress" ng-style="{width: progress + \'%\'}"></div>'
  };
});