Question

我的AngularJS网络应用程序实际上存在问题。

所以我认为这是：

<div class="xe-widget xe-counter" data-count=".num" data-from="0" data-to="{{ users }}" data-suffix=" / 30" data-duration="2">
        <div class="xe-icon">
            <i class="linecons-user"></i>
        </div>
        <div class="xe-label">
            <strong class="num">0</strong>
            <span>Joueurs en ligne</span>
        </div>
    </div>

在我的控制器中，我添加了这个：

$scope.users = 10;

但问题是数据到=＆＃34; {{用户}}＆＃34;在div中，似乎无法工作..当我尝试将数据替换为=＆＃34; {{users}}＆＃34;具有静态值，如：data-to = 10;它在工作。

我做错了吗？

这是计数器的指令

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', 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);
                //alert(to); --> Printing {{users}}
                sm.destroy();
            });
        }
    };
}).

我添加了警报（to）;检查值是否已正确发送，但我得到了{{users}}而不是值..

Answer 1

您必须包含一个ng-controller来告诉angular在哪里查找范围变量。尝试在视图中添加ng-controller属性

<div ng-controller="YourController" class="xe-widget xe-counter" data-count=".num" data-from="0" data-to="{{ users }}" data-suffix=" / 30" data-duration="2">
    <div class="xe-icon">
        <i class="linecons-user"></i>
    </div>
    <div class="xe-label">
        <strong class="num">0</strong>
        <span>Joueurs en ligne</span>
    </div>
</div>

Answer 2

我认为这对你来说太迟了，但对其他人来说可能有用。

替换你的指令：

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应该保持这样：

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

确定 $ scope.total 变量已声明且其值为数字。

div中的angularJS变量

2 个答案: