AngularJSコンポーネントで新しい変数を定義する方法

Question

プログレスバーに対応するAngularJSコンポーネントを作成しようとしています。

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

そして、次のHTMLコード：

<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> 

でwidth属性の定義にもかかわらず、ここでJSFiddleはここhttp://jsfiddle.net/Lvc0u55v/6725/

は私のアプリケーションとコンポーネントの定義で、この質問のために作成されますAngularJSは、定義されたテンプレートでそれを見つけることができません。

私はちょうどAngularJSを学び始めて以来、このコードを効率的にデバッグするのが難しいです。

Answer 1

コンポーネントで=（双方向バインディング）を使用しているため、{{}}をパーセント属性値で使用しないでください。直接計算された値は()かっこでラップされたpercentage属性に渡すことができます。

進捗バーを表示するためのバインディングの割合は、bindingsに渡された$ctrl.percentage値のng-styleディレクティブを使用できます。それが唯一のレンダリングに割合を設定するためのコンポーネントの幅は、値がに取り付けることができる、変更することはありません

HTML

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

指令Tempalte

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

JSFiddle Here