AngularJS 指令 Countup.JS 从模型中获取数据答案

【问题标题】：AngularJS Directive Countup.JS get data from modelAngularJS 指令 Countup.JS 从模型中获取数据
【发布时间】：2015-06-28 20:49:08
【问题描述】：

我正在使用这个插件：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();
            });
        }
    };
}).

如何更改指令以便为to 参数传递data-ng-model 值？

编辑：

我尝试添加scope:{ ngModel: '='}，但出现此错误：

错误：$compile:multidir 多指令资源争用

多个指令 [upCounterupCounter, new/isolated scope] 在 {5} 上要求 {4}

说明

当多个指令应用于同一个 DOM 元素时会发生此错误，并且处理它们会导致冲突或不受支持的配置。

要解决此问题，请删除导致冲突的指令之一。

多个不兼容指令应用于同一元素的示例场景包括：

多个指令请求隔离范围。
多个指令以相同的名称发布控制器。
使用嵌入选项声明的多个指令。
尝试定义模板或模板URL 的多个指令。

【问题讨论】：

您可以使用require: 'ngModel' 然后在您的链接函数中传递 ngModel 作为第四个参数。这将允许您在链接函数中访问 ngModel API。 ngModel.$viewValue 使您可以访问当前值。如果您需要，将尝试为您模拟一个示例演示。
感谢您的信息。我确实像你提到的那样尝试过，但在指令中`ngModel.$viewValue`的值是Nan

标签： angularjs angularjs-directive

【解决方案1】：

我刚刚发现您可能没有使用 $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>

【讨论】：