0

プログレスバーに対応する AngularJS コンポーネントを作成しようとしています。これは、この質問のために作成された JSFiddle ですhttp://jsfiddle.net/Lvc0u55v/6725/

私のアプリケーションとコンポーネントの定義は次のとおりです。

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コンポーネント コントローラでの属性の定義にもかかわらず、AngularJS は定義されたテンプレートでそれを見つけることができません。

AngularJS の学習を始めたばかりなので、このコードを効率的にデバッグするのに苦労しています。

4

1 に答える 1

1

=コンポーネントで（双方向バインディング）を使用しているため、パーセンテージ属性値で使用するべきではありません{{}}。直接計算された値は、括弧percentageで囲まれた属性に渡すことができます。()

プログレスバーを表示するためにパーセンテージをバインドしている間、 component に渡された値でng-styleディレクティブを使用できます。$ctrl.percentagebindings

HTML

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

テンパルテ指令

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

JSFiddle ここに

于 2016-07-11T16:34:00.570 に答える