Javascript 无法在数据endVal="；中设置值；{{ucount}}"；使用角度JS的倒计时

我得到了客户和供应商的数量显示在仪表板上 对计数器使用countUp.js

使用的文件

AngularJS v1.3.15 countUp.js v 1.1.1

控制器代码

myApp.controller('dashboardCtrl', [
        '$scope',
        'files',
        '$http',
        function ($scope, files,$http) {
            $http.get('../../../Admin/Notification/GetAllNotifications')
                .success(function (data, status, headers, config) {
                    $scope.ucount = parseInt(data['ucount']);
                    $scope.scount = parseInt(data['scount']);
                    //alert($scope.ucount);
                    //alert($scope.scount);
                }).
                error(function (data, status, headers, config) {
                    console.log(status);
                });

        }
])

从GetAllNotifications生成的JsonResult

{“ucount”：3，“scont”：2}

显示数据的Div

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

1300
总客户

上面的代码非常适合静态数据，但是当我使用

---

{{ucount}}在数据endVal属性中，它在控制台中给出错误：“countUp error:startVal或endVal不是数字”

我认为问题在于如何将{count}传递给指令。你可能没有正确地通过它。因为你可能发送的不是一个数字，而是一个字符串。尝试使用：

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

。。。

我认为问题在于如何将{{count}}传递给指令。你可能没有正确地通过它。因为你可能发送的不是一个数字，而是一个字符串。尝试使用：

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

。。。

可能出现错误是因为get请求是异步的，$scope.ucount在尝试访问时不存在？是否尝试设置$scope.ucount的初始值？例如，与0类似

可能出现错误，因为get请求是异步的，$scope.ucount在尝试访问时不存在？是否尝试设置$scope.ucount的初始值？例如像0，我初始化了状态中的数据，现在它正在工作 这是州代码

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

    }])

用户界面代码

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

{{ucount}}
总客户

我在状态下初始化了数据，现在它正在工作 这是州代码

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

    }])

用户界面代码

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

{{ucount}}
总客户

在设置

$scope.ucount

和

$scope.scount

之后，您是否尝试使用

$scope.$apply（）

在设置

$scope.ucount

和

$scope.scount

之后？@Cédric i打印了{ucount}的值在标签中，它完美地显示了值，但该值在数据endVal属性中不被接受。请给我生成错误的计数库的行号好吗？即使在打印{ucount}}的值时，works也尝试过我的解决方案吗？因为我很确定，如果在函数开始时将$scope.ucount设置为0，它会工作。我在函数开始时将$scope.ucount的值设置为0，错误消失了，但该值是静态的0。好的，那么在更新后尝试使用$scope.$apply（），如果它不工作，我认为解决方案可以是使用ng，如果，例如：1300当ucount值为0时，此范围不在DOM中，当值为update时，范围为create。我不认为这是最好的方法，但我认为这是可能的works@Cédric i在标签中打印了{ucount}的值，它完美地显示了该值，但该值在数据endVal属性中不被接受。请给我生成错误的计数库的行号好吗？即使在打印{{ucount}}works尝试过我的解决方案吗？因为我很确定如果在函数开始时将$scope.ucount设置为0，它就会工作。我在函数开始时将$scope.ucount的值设置为0，错误消失了，但值是静态的0。好的，请尝试使用$scope。$apply（）更新后如果不起作用，我认为解决方案可能是使用ng，例如：1300当ucount值为0时，这个跨度不在DOM中，当值为update时，跨度为create。我不认为这是最好的方法，但我认为这可能是可行的。感谢您研究了这个问题，但错误尚未解决。谢谢或者研究问题，但错误尚未解决。