AngularJS控制器阵列模型修改后未刷新视图

我是AngularJS的新手，我正在做一个示例项目以了解它。我彻底搜索了网页并尝试了所有提出的解决方案，都是徒劳的。我仍然不知道我做了什么错误导致了这个问题。AngularJS控制器阵列模型修改后未刷新视图

我想构建一个AngularJS示例应用程序。我想与其控制器（AppLayoutController）有一个父布局，以便处理像注销同时共享导航栏等等的东西，等等...

我的ui路由器配置如下：

$stateProvider 
    .state('appLayout', { 
     templateUrl: 'views/appLayout.html', 
     abstract: true, 
     controller: 'AppLayoutController', 
     controllerAs: 'appLayoutControllerVm' 
    }) 
    .state('roles', { 
     url: '/roles', 
     templateUrl: 'views/roles.html', 
     controller: 'RolesController', 
     controllerAs: 'vm', 
     parent: 'appLayout' 
    });

我的控制器代码如下：

(function() { 
'use strict'; 

angular 
    .module('MyApp') 
    .controller('RolesController', RolesController); 

RolesController.$inject = ['AuthorizationService']; 
function RolesController(AuthorizationService) { 
    var vm = this; 

    vm.dataLoading = true; 
    //vm.roles = []; 

    AuthorizationService.GetRoles().then(function (loadedRoles) { 
     vm.roles = loadedRoles; 
     vm.dataLoading = false; 
    }); 
} 
})();

我的服务代码如下：

(function() { 
'use strict'; 

angular 
    .module('MyApp') 
    .factory('AuthorizationService', AuthorizationService); 

AuthorizationService.$inject = ['$http', '$q']; 
function AuthorizationService($http, $q) { 
    var service = {}; 

    service.GetRoles = GetRoles; 

    return service; 

    function GetRoles() { 
     // Get the deferred object 
     var deferred = $q.defer(); 

     // Initiates the AJAX call 
    $http.get('/api/roles').success(deferred.resolve).error(deferred.reject); 

     // Returns the promise - Contains result once request completes 
     return deferred.promise; 
    } 
} 
})();

最后，我的html代码如下：

<div> 
    Data Loading: {{ vm.dataLoading }} 
    <div ng-repeat="role in vm.roles"> 
     <div>{{role.name}}</div> 
     <div>{{role.description}}</div> 
    </div> 
</div>

发生了什么事是这样的：

我把一个断点在JS调试
当我刷新页面，调用之前API来检索角色
页面显示dataLoading设置为false并且不显示任何角色
当我继续在断点时， e dataLoading传递给true，但角色保持为空，即使认为API正在返回包含一个角色的列表。 ng-repeat没有被刷新。

我试图这样做来解决它（非详尽:)）：

我试图初始化vm.roles为[]
我试图替换“vm.roles = loadedRoles ;”由：push.apply，angular.extend甚至试图从JSON的loadedRoles转化为一个简单的数组
使用$范围，而不是vm.roles
删除$ Q

我的技巧之外！

来源

2016-08-16 zahikaram

试$范围。$应用

AuthorizationService.GetRoles().then(function (loadedRoles) { 
    $scope.$apply(function(){ 
     vm.roles = loadedRoles; 
     vm.dataLoading = false; 
    }); 
});

来源

2016-08-16 21:36:31 DMCISSOKHO

您好，感谢您的帮助。我刚刚尝试了你的建议。不幸的是，它没有工作，我得到了3类错误：“错误：[$ rootScope：inprog] http://errors.angularjs.org/1.5.6/$rootScope/inprog?p0=%24digest”。 – zahikaram

我想通弄明白了，如果有人正面临着类似的问题。问题是AngularJS区分大小写，我不知道。 2天之后，我在HTML文件替换解决了这个问题：

<div>{{role.name}}</div> 
    <div>{{role.description}}</div>

通过

<div>{{role.Name}}</div> 
    <div>{{role.Description}}</div>

希望这有助于其他人。干杯！

来源

2016-08-17 22:12:19 zahikaram

AngularJS控制器阵列模型修改后未刷新视图

回答

相关问题