Javascript AngularJS：在<；中使用变量；部门>；

我有一个名为“HomeCtrl”的控制器，它计算进入

{{total}}

绑定变量的用户总数，如下所示：

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

<div class="xe-widget xe-counter" xe-counter data-count=".num" data-from="0" data-to="{{ total }}" data-suffix="" data-duration="5">
<div class="xe-icon"><i class="linecons-cup" /></div>
<div class="xe-label"><strong class="num">0</strong><span>TOTAL</span></div>
</div>

在我看来，我试图通过将

{{{total}}

作为

标记上的属性值传递，在动画小部件中显示我的总计，如下所示：

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

---

我可以在视图中显示{{total}}的正确值，但是当我将

{{total}}

传递到属性中时，作为

数据传递到=“{total}”

，它不起作用。它不能识别它是一个数字。

您必须加以区分，因为如果您只是在指令模板中使用{{total}}，它就会工作，因为如果在本地控制器中找不到，angular会自动在父控制器中查找total

另一方面，如果要在隔离范围中使用total的值，可以将数据绑定到属性，这可以通过以下代码实现：

app.directive('xeCounter', function(){
 return {
    restrict: 'EA',
    scope: { to: '@' },
    link: function(scope)
    {
        console.log(scope.to);
    }
 };
});

顺便说一句，我将限制从EAC更改为EA，因为否则您的指令将应用两次并中断。你必须在属性值周围加上星号

请参阅完整的工作示例。

这对我很有用

为此替换您的指令：

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 = attrs.from ? attrs.from : 0,
                    to = attrs.to ? attrs.to : 100,
                    duration = attrs.duration ? attrs.duration : 2.5,
                    delay = attrs.delay ? attrs.delay : 0,
                    decimals = String(to).match(/\.([0-9]+)/) ? 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();
            });
        }
    };
}).

HTML应该保持如下状态：

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

<div class="xe-widget xe-counter" xe-counter data-count=".num" data-from="0" data-to="{{ total }}" data-suffix="" data-duration="5">
<div class="xe-icon"><i class="linecons-cup" /></div>
<div class="xe-label"><strong class="num">0</strong><span>TOTAL</span></div>
</div>

0总计

请舒尔声明$scope.total变量，其值是一个数字。

这对我来说很有用： 当控制器加载时，使用异步webservice调用检索该号码。 这意味着调用sm.fullyEnteredViewport函数时该值不存在。 但幸运的是，您可以在xe计数器元素上设置数据延迟属性

0总计

在我看来，我尝试了这一行：data to=“{{total}}”data to={{total}}data to=“total”data to=total。。没有成功！在浏览器控制台中，我有一个错误：“countUp error:startVal或endVal不是一个数字”startVal和endVal是Joignable.js的变量，在我的代码中是data from=“1”data to=“{{total}”签出支持站点（search xe counter）你能告诉我我的原始指令应该如何区分“to”变量吗？我不知道你到底打算在哪里使用total变量，但我更新了指令。仍然缺少一些东西，因为我不知道像scrollMonitor这样的对象来自哪里。。。请看部分

to=scope.to

谢谢，顺便说一句，它显示的是total的初始值是0，而不是更新后的total，您知道如何取我的{{total}的最后一个值吗？这是一个lotconsole.log（scope.to）；=>但是在我的控制器中，我做了类似$scope.total=$scope.compteur$scope.compteur是用户的数量。有不同的可能性，其中一种是。我在这里做的基本工作是将指令中的属性从

data改为=“{{total}}”

改为

data to=total

，并在指令的

链接中添加了一个watch函数。