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控制器陣列模型修改後未刷新視圖

回答

相關問題