AngularJS Directive Countup.JS получить данные из модели

Question

AngularJS Directive Countup.JS получить данные из модели

0

Я использую этот плагин: COUNTUP

и у меня есть следующая директива:

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();
            });
        }
    };
}).

Как изменить директиву так, чтобы я мог передать значение data-ng-model для параметра to?

РЕДАКТИРОВАТЬ:

Я попытался добавить scope:{ ngModel: '='} но я получил эту ошибку:

Ошибка: $ compile: multidir Несколько конфликтов ресурсов

Несколько директив [upCounterupCounter, новая/изолированная область], запрашивающая {4} on: {5}

Описание

Эта ошибка возникает, когда несколько директив применяются к одному и тому же элементу DOM, и их обработка приведет к столкновению или неподдерживаемой конфигурации.

Чтобы устранить эту проблему, удалите одну из директив, вызывающих столкновение.

Примеры сценариев нескольких несовместимых директив, применяемых к одному и тому же элементу, включают:

Несколько директив, запрашивающих изолированную область.
Несколько директив публикуют контроллер под тем же именем.
Несколько директив, объявленных с опцией перехода.
Несколько директив, пытающихся определить шаблон или шаблонURL.

user2818430 28 июнь 2015, в 23:40

Источник

Теги:

angularjs

angularjs-directive

1 ответ

Ещё вопросы

jme11 · Answer 1 · 2015-06-28T22-06-00.000Z

Я просто понял, что вы, вероятно, не используете $ watch для ожидания инициализации значения после первого дайджеста. Если вы посмотрите на источник директивы ngModel, вы увидите, что ngModelController инициализирует $ viewValue как NaN.

Итак, добавление $ watch сделает трюк:

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>