$scope.myVar 更新但不在视图中

Question

我有一个模板嵌套在共享同一控制器的另一个模板（菜单是父模板）中。我的控制器从名为 counterOperations 的服务中获取值。虽然 $scope.total 似乎在 console.log 中更新，但视图不会更新值。

控制器

.controller('ListController', function ($scope, $http, $state, counterOperations, userService) {

//Some code

 $scope.add = function (index) {
        $scope.total = counterOperations.getTopCounter();
        console.log($scope.total);
    };


})

模板

$stateProvider
    .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: "ListController"
    })

$stateProvider
    .state('app.list', {
        url: '/list',
         views: {
            'products': {
                templateUrl: 'templates/product-list.html',
                 controller: "ListController"
            }
        }
    })

通过 ng-click 我触发了一个函数，该函数从服务中调用了一些函数

菜单的视图变量

 <span>{{total}}</span>

我试过用这种方式更新值，但没有任何变化

setTimeout(function() {
    $scope.total = counterOperations.getTopCounter();
}, 1000);

有什么想法吗？

Answer 1

.controller('ListController', function ($scope, $http, $state, counterOperations, userService) {

//Some code
$scope.total = ''; //or $scope.total = 0;

 $scope.add = function (index) {
        $scope.total = counterOperations.getTopCounter();
        console.log($scope.total);
    };


})

检查以上是否适合您？

Answer 2

这里你的2个状态“app”和“app.list”有相同的控制器，当你改变状态从“ app" 到 "app.list" 无论是同一个控制器控制器都将重新实例化，这意味着 $scope.total 变量中的值将丢失并将在下一个状态重置。

解决方案 -

如果你想在其他状态下也将 total 分配给 $rootScope

$scope.add = function (index) {
    $rootScope.total = counterOperations.getTopCounter();
};

$scope.myVar 更新但不在视图中

$scope.myVar updates but not in the view

scope

angularjs

angular-services

angular-ui-router

ionic-framework