AngularJS：在 <div> 中使用变量

【问题标题】：AngularJS : use a variable into <div>AngularJS：在 <div> 中使用变量
【发布时间】：2014-12-17 08:34:28
【问题描述】：

我有一个名为“HomeCtrl”的控制器，它计算用户总数到{{total}}绑定变量中，如下所示：

.controller('HomeCtrl', function($scope, $http){
    $scope.total = 0;
});

在我看来，我试图通过将{{total}} 作为<div> 标记上的属性值传递来在动画小部件中显示我的总数，如下所示：

<div ng-controller="HomeCtrl" ng-init="init('users')">
    <div class="xe-widget xe-counter xe-counter-green" xe-counter 
       data-count=".num" data-from="1" 
       data-to= "{{total}}" 
       data-suffix="users" data-duration="3" data-easing="true">
          <div class="xe-icon">
                  <i class="linecons-user"></i>
          </div>
          <div class="xe-label">
                  <strong class="num">1k</strong>
                  <span>Users Total </span>
          </div>
   </div>            
   <center> <b> Total utilisateurs : {{total}} </b> </center>     

这是小部件指令：

.directive('xeCounter', 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, 'to', ''),
                    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();
                });
            }
        };
    })

我可以在我的视图中显示正确的 {{total}} 值，但是当我将{{total}} 传递给属性时，如data-to= "{{total}}"，它不起作用。它不会将其识别为数字。

【问题讨论】：

• 在我看来，这一行
• 我试过了：data-to= "{{total}}" data-to= {{total}} data-to= "total" data-to= total .. 没有成功！跨度>
• 在浏览器控制台中我有这个错误：“countUp error: startVal or endVal is not a number”
• startVal 和 endVal 是 Joignable.js 在我的代码中的变量是 data-from="1" data-to="{{total}}"
• 查看支持网站（搜索 xe-counter）link