Wie definiert man eine neue Variable in AngularJS Komponente

Question

Ich habe versucht, eine AngularJS-Komponente entsprechend einem Fortschrittsbalken zu erstellen. Hier ist ein JSFiddle für diese Frage erstellt http://jsfiddle.net/Lvc0u55v/6725/

Hier ist meine Anwendung und Komponente Definition:

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

myApp.controller('TestController', function($scope) { 
    $scope.total = 20; 
    $scope.count = 15; 

    $scope.changeTotal = function(value){$scope.total += value}; 
    $scope.changeCount = function(value){$scope.count += value}; 
}); 

myApp.component('progressBar', { 
    bindings: { 
     percentage: '=', 
    }, 
    controller: function() { 
     this.width = this.percentage * 100; 
    }, 
    template: '<div class="progressBar">\ 
      <div class="inner" style="width: [[$ctrl.width]]%"></div>\ 
     </div>', 
}); 

Und die folgenden HTML-Code:

<div ng-app="myApp"> 
    <div ng-controller="TestController"> 
    Total: {{total}}, <button ng-click="changeTotal(-1)">-</button><button ng-click="changeTotal(+1)">+</button><br/> 
    Count: {{count}}, <button ng-click="changeCount(-1)">-</button><button ng-click="changeCount(+1)">+</button><br/> 
    Percentage: {{count/total}}%<br/> 
    <br/> 

    <progress-bar percentage="{{count/total}}"></progress-bar> 

    </div> 
</div> 

Trotz der Definition des width Attribut in der Component Controller, AngularJS kann es in der definierten Vorlage nicht finden.

Ich habe einige Schwierigkeiten, diesen Code effizient zu debuggen, seit ich gerade angefangen habe, AngularJS zu lernen.

Answer 1

Da Sie in der Komponente = (Zwei-Wege-Bindung) verwenden, sollten Sie {{}} nicht als prozentualen Attributwert verwenden. Der direkt berechnete Wert kann an das Attribut percentage übergeben werden, das mit () Klammer umschlossen ist.

Während der Bindungsprozentsatz für die Fortschrittsleiste angezeigt wird, können Sie die ng-style Direktive mit $ctrl.percentage Wert verwenden, der an die Komponente bindings übergeben wurde.

HTML

<progress-bar percentage="{{(count/total)}}"></progress-bar> 

Richtlinie Tempalte

template: '<div class="progressBar">\ 
     <div class="inner" ng-style="{ width: $ctrl.percentage+\'%\'}"></div>\ 
    </div>', 

JSFiddle Here