Продвинутый обработчик в angularjs

Question

Я реализовал обработчик прогресса в простом javascript, мне интересно, как я могу достичь того же, используя функцию привязки угловых данных.

HTML

<div class="progress-bar"></div> 

равнина JavaScript:

progressBar.style.width = progress + "%"; 

, как это может быть переведено в угловом мире, пусть я угловое приложение уже экземпляр, и я могу установить переменный в $scope

$scope.progress = progress; 

, что я не понимаю, как привязать это значение к ширине свойства progres s-bar (div)

Answer 1

Вы можете использовать ngStyle.

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

Answer 2

Самый простой способ сделать это, просто установив с с ngStyle:

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

Вы можете превратить это в Angular directive хотя. Таким образом, индикатор будет многоразовый:

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>' 
    }; 
}); 

Plnk: http://plnkr.co/edit/g1ctSdffrwLmA5sw62uR