AngularJSコントローラアレイモデルの変更後にビューが更新されない

Question

AngularJSが初めてで、私はそれを学ぶためにサンプルプロジェクトを行っています。私は徹底的にウェブを検索し、すべての提案された解決策を無駄に試しました。私はまだこの問題を引き起こしているミスを知りません。

私はAngularJSサンプルアプリケーションを作成しようとしています。私は次のように

マイUI-ルータの設定がある...と同時に、ナビゲーションバーを共有しながらなど、ログアウトするようなものを処理するために、そのコントローラ（AppLayoutController）を持つ親のレイアウトを持つようにしたい：

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

：

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

マイサービスコードは以下の通りです：

$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' 
    }); 

私のコントローラのコードは以下のとおりです。

最後に、私のhtmlコードは以下の通りです：私はページを更新すると

1. 私はJSデバッガ
2. にブレークポイントを配置し、呼び出す前に：何が起こって

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

   は以下のとおりです。ロールを取得するためのAPI

3. dataLoadingがfalseに設定された状態でページが表示され、ロールが表示されない
4. 私がブレークポイントを続けると、 eのdataLoadingはtrueになりますが、APIが1つのロールを含むリストを返していても、ロールは空のままです。 ng-repeatはリフレッシュされていません。
私は（:)非網羅）それを解決するために実行しようとしました何

：

• 私は「vm.roles = loadedRolesを交換しようとした[]
• にvm.rolesを初期化してみました; " ：push.apply、angular.extendあるいは$ qを私は

を削除vm.roles

の代わりに$スコープを使用して単純な配列

にJSONからloadedRolesを変換しようとしていますトリックから！

Answer 1

トライ$スコープ。$

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> 

が、これは他の人がお役に立てば幸いです。 乾杯！