javascript - AngularJS : använd en variabel i <div>

Jag har en controller som heter "HomeCtrl" som beräknar det totala antalet användare i {{total}}-bindningsvariabeln, på detta sätt:

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

Enligt min mening försöker jag visa mitt totalt i en animerad widget genom att skicka {{total}} som värdet för ett attribut på en <div>-tagg, så här:

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

Här är widgetdirektivet:

.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();
                });
            }
        };
    })

Jag kan visa det korrekta värdet av {{total}} i min vy, men när jag skickar {{total}} till attributet, som data-to="{{total}}", fungerar det inte. Det känner inte igen det som ett nummer.

Svar #1

Detta fungerar för mig: Numret hämtas med ett asynkront webbtjänst-anrop när controllern laddas. Det betyder att värdet inte finns där när funktionen sm.fullyEnteredViewport anropas. Men som tur är kan du sätta ett data-delay-attribut på xe-counter-elementet.

<div class="xe-widget xe-counter" xe-counter data-delay="1" 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>

Modifiera sedan din direktiv så här: Hämta fördröjningsvärdet från elementet och lägg resten av den andra koden i den fördröjda funktionen så här:

directive('xeCounter', function () {
    return {
        restrict: 'EAC',
        link: function (scope, el, attrs) {

            var $el = angular.element(el),
                sm = scrollMonitor.create(el);
          
                //get the delay attribute from element
                var delay = attrs.delay ? attrs.delay : 0;

            sm.fullyEnterViewport(function () {

                setTimeout(function () {
                    // get all values from element delayed and start the counter
                    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,
                    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);
                    counter.start();
                }, delay * 1000);

                sm.destroy();
            });
        }
    };
}).

Din webbtjänst bör svara inom tiden för fördröjning. Det fungerar för mig.

Svar #2

Du måste skilja, eftersom om du bara använder {{total}} i din direktivmall fungerar det, eftersom Angular automatiskt kommer att leta efter total i föräldrakontrollern om det inte hittas i den lokala.

Å andra sidan, om du vill använda värdet av total i ett isolerat område, kan du binda till ditt data-to-attribut, och detta uppnås med följande kod:

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

Förresten ändrade jag restriktionen från EAC till EA, för annars kommer din direktiv att tillämpas två gånger och går sönder. Och du måste sätta asteriskerna runt attributvärdet.

Se hela det fungerande exemplet här.