Question

我正在使用此插件：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，new / isolated scope]要求{4}开启：{5}

描述

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

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

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

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

Answer 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>

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

1 个答案: