CODEWITHSUNDEEP
angularjsangularjs-directive
user2818430
user2818430

Reputation: 6029

AngularJS Directive Countup.JS get data from model

I am using this plugin: COUNTUP

and I have the following directive:

directive('upCounter', function () {

    return {
        restrict: 'EAC',
        link: function (scope, el, attrs) {
            var $el = angular.element(el),
                sm = scrollMonitor.create(el);

            sm.fullyEnterViewport(function () {
                var opts = {
                    useEasing: attrDefault($el, 'easing', true),
                    useGrouping: attrDefault($el, 'grouping', true),
                    separator: attrDefault($el, 'separator', ','),
                    decimal: attrDefault($el, 'decimal', '.'),
                    prefix: attrDefault($el, 'prefix', ''),
                    suffix: attrDefault($el, 'suffix', '')
                },
                $count = attrDefault($el, 'count', 'this') == 'this' ? $el : $el.find($el.data('count')),
                from = attrDefault($el, 'from', 0),
                to = attrDefault($el, 'ng-model', 100),
                duration = attrDefault($el, 'duration', 2.5),
                delay = attrDefault($el, 'delay', 0),
                decimals = new String(to).match(/\.([0-9]+)/) ? new String(to).match(/\.([0-9]+)$/)[1].length : 0,
                counter = new countUp($count.get(0), from, to, decimals, duration, opts);

                setTimeout(function () { counter.start(); }, delay * 1000);

                sm.destroy();
            });
        }
    };
}).

How can I change the directive so that I can pass a data-ng-model value for the to parameter?

EDIT:

I've tried adding scope:{ ngModel: '='} but I got this error:

Error: $compile:multidir Multiple Directive Resource Contention

Multiple directives [upCounterupCounter, new/isolated scope] asking for {4} on: {5}

Description

This error occurs when multiple directives are applied to the same DOM element, and processing them would result in a collision or an unsupported configuration.

To resolve this issue remove one of the directives which is causing the collision.

Example scenarios of multiple incompatible directives applied to the same element include:

Upvotes: 0

Views: 833

Answers (1)

jme11
jme11

Reputation: 17374

I just figured out that you probably aren't using a $watch to wait for the value to be initialized after the first digest. If you take a look at the ngModel directive source, you'll see that the ngModelController initializes the $viewValue as NaN.

So, adding a $watch will do the trick:

var app = angular.module('countup.demo', []);
app.controller('CounterCtrl', ['$scope', function($scope){
  $scope.countervalue = 100;
}])
.directive('upCounter', function () {

  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      scope.$watch(ngModel, function(newval) {
        alert(ngModel.$viewValue);
      });
      
    }
  };
});
<script src="https://code.angularjs.org/1.3.16/angular.js"></script>

<div ng-app="countup.demo">
  <div ng-controller="CounterCtrl">
    <div up-counter id="counter" ng-model="countervalue"></div>
    <p>countervalue: {{countervalue}}</p>
  </div>
</div>

Upvotes: 0

Related Questions