数値を設定できませんAngular JSを使用してCountUpのdata-endVal = "{{ucount}}"

Question

ダッシュボード にカウンターにcountUp.jsを使用して表示する顧客数と仕入先数が表示されています。

ファイルが

AngularJSのv1.3.15に countUp.js https://github.com/inorganik/countUp.js V 1.1.1

Minfied Version Of CountUp 1.1.1

コントローラコード

​​

GetAllNotifications

から生成された化するJsonResultを使用します

{ "ucount"：3、 "scount"：2}

本部データが

<div class="col-lg-3 col-sm-6"> 
      <div class="info_box_var_1 box_bg_a"> 
      <div class="info_box_body"> 
       <span class="info_box_icon icon_group"></span> 
       <span class="countUpMe" data-endVal="1300">1300</span> 
      </div> 
      <div class="info_box_footer"> 
       Total Customers 
      </div> 
     </div> 
</div> 

を表示する場合、上記のコードは、静的データのために完全に動作しますが、私は {{ucountを使用してデータを渡す場合}}} data-endVal属性で、コンソールでエラーが発生しました。「countUpエラー：startValまたはendValが数字ではありません」

Answer 1

{{count}}をディレクティブに渡す方法が問題だと思います。あなたはおそらくそれを正しく渡さないでしょう。番号を受け取る代わりに、文字列を送る可能性が高いからです。使用してみてください：get要求は、それがアクセスしようとすると、非同期および$ scope.ucountが存在していないですbeacause

<span class="countUpMe" count-up end-val={{count}}>...</span> 

Answer 2

たぶん、エラーが表示されますか？ $ scope.ucountの初期値を設定しようとしていますか？ 0のような例も

Answer 3

のために私は状態のデータを初期化し、今ではここ を働いていると、状態コード

myApp.state("auth.home", { 
       // this state page title 
       page_title: 'Stock Management - Dashboard', 
       // this state url 
       url: "/", 
       templateUrl: '../../../Admin/Page/getPage?path=Views/templateviews/dashboard.cshtml', 
       // load state specific js/css 
       resolve: { 
        notificationdetail: function ($http) { 
         return $http({ method: 'GET', url: '../../../Admin/Notification/GetAllNotifications' }) 
          .then(function (data) { 
           var notificationdetail = data.data; 
           return notificationdetail; 
          }); 
        }, 
        files: [ 
         'uiLoad', 
         function (uiLoad) { 
          return uiLoad.load([ 
           // countUp animation 
           '../../../Areas/Admin/assets/js/countUp.min.js', 

          ]); 
         } 
        ] 
       }, 
       controller: 'dashboardCtrl', 
       ncyBreadcrumb: { 
        label: 'Home' 
       } 
      }) 

と、このコントローラのコード今

myApp.controller('dashboardCtrl', [ 
    '$scope', 
    'files', 
    '$http', 
    'notificationdetail', 
    function ($scope, files, $http, notificationdetail) { 
     $scope.ucount = parseInt(notificationdetail['ucount']); 
     $scope.scount = parseInt(notificationdetail['scount']); 

     //// run scripts after state load 
     $scope.$on('$stateChangeSuccess', function() { 
      // init dashboard functions 
      $scope.$watch('countries_data', function() { 
       countries_data = $scope.countries_data; 
       yukon_dashboard.init(); 
      }); 
     }) 

    }]) 

UIコードです

<div class="col-lg-2 col-sm-6"> 
    <div class="info_box_var_1 box_bg_a"> 
     <div id="notficDiv" class="info_box_body"> 
      <span class="info_box_icon icon_group"></span> 
      <span class="countUpMe" data-endval="{{ucount}}">{{ucount}}</span> 
     </div> 
     <div class="info_box_footer"> 
      Total Customers 
     </div> 
    </div> 
</div>