How to defined a new variable in AngularJS component

Question

I have trying to create a AngularJS component corresponding to a progress bar. Here is a JSFiddle created for this question http://jsfiddle.net/Lvc0u55v/6725/

Here is my application and component 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>',
});

And the following 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>

Despite the definition of the width attribute in the component controller, AngularJS can not find it in the template defined.

I have some difficulty to debug this code efficiently since I just started learning AngularJS.

Pankaj Parkar · Accepted Answer · 2016-07-12T08:02:48.730

1

As you are using = (two way binding) in component, then you shouldn't be using {{}} in percentage attribute value. Direct calculated value can passed to percentage attribute wrapped with () parenthesis.

While binding percentage for showing progress bar, you could use ng-style directive with $ctrl.percentage value which has been passed to component bindings.

HTML

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

Directive Tempalte

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

JSFiddle Here

edited Jul 12 '16 at 08:02

answered Jul 11 '16 at 16:34

Pankaj Parkar

134,766
23
234
299

The component's width will never change because it only sets the percentage on render, the value could be attached to a common service to handle it dynamically correctly. – GMaiolo Jul 11 '16 at 16:51
@Goliadkin dear sir, did you checked fiddle? this is how `=` is used for two way bidning,, – Pankaj Parkar Jul 12 '16 at 03:06
@PankajParkar Thanks ! The progress bar does not move, so despite your modification, it is not working :( I have edited it to set up the width correctly (a `*100` was missing) : http://jsfiddle.net/p8xqyhng/2/ Second question, was the var `self = this;` is used for ? – Félix Veysseyre Jul 12 '16 at 07:29
@fef Oh sorry I missed that part.. I used `var self = this;` to reduced [*`this vs that`*](http://stackoverflow.com/questions/4886632/what-does-var-that-this-mean-in-javascript) problem in future.. – Pankaj Parkar Jul 12 '16 at 07:32
@fef also look at the updated Fiddle.. yesterday I forgot to save fiddle before adding it to answer – Pankaj Parkar Jul 12 '16 at 08:03
@PankajParkar Works for me ! Thanks again ;) – Félix Veysseyre Jul 12 '16 at 14:36

How to defined a new variable in AngularJS component

1 Answers1