Question

我是AngularJS的新手，我正在做一个示例项目以便学习它。我彻底搜索了网络并尝试了所有提议的解决方案，但都是徒劳的。我仍然不知道我做了什么错误导致了这个问题。

我正在尝试构建一个AngularJS示例应用程序。我想拥有一个带有控制器（AppLayoutController）的父布局，以便在共享导航栏等的同时处理注销等内容......

我的ui-router配置如下：

    $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且未显示任何角色
当我继续断点时，dataLoading传递给true，但是角色保持为空，即使API返回包含一个角色的列表。 ng-repeat没有刷新。

我试图解决它（非详尽的:)）：

我尝试将vm.roles初始化为[]
我尝试更换“vm.roles = loadedRoles;” by：push.apply，angular.extend甚至尝试将loadedRoles从JSON转换为简单数组
使用$ scope而不是vm.roles
删除$ q

我没有技巧！

Answer 1

尝试$ scope。$ apply

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

Answer 2

我弄清楚是否有人面临类似的问题。问题是AngularJS区分大小写，我不知道。 2天后，我通过替换html文件来解决问题：

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

通过

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

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

AngularJS控制器阵列模型修改后查看未刷新

2 个答案: