角度コントローラがサービスオブジェクトのプロパティng-repeatをバインドしていません

Question

サービスから返された配列の項目をテンプレートに表示するのに問題があります。私はコントローラをシンタックスとして正しく使用していると考えています。コントローラ、テンプレート、および自分の.config（）$ state（ui-router）ブロックで使用されています。しかし何らかの理由でページ上に何も表示されません。

私はクロムでデバッグしようとしましたが、コントローラにブレークポイントを置いたとき、vm.processesがオブジェクトを保持しましたが（4つのアイテムを持つ配列すべてがチェックアウトされました）、再び何も表示されませんでした/ c vm。コントローラー内の何かを公開するので、テンプレートからアクセスできる必要があります。

私はトラブル$ HTTPを使用してファイル自体をつかんを持った、JSONオブジェクトを返す単純なサービスを定義したので、私はちょうどサービスファイルの値をハードコーディングすることにしました：

.factory('dataservice', function dataservice($http) { 
     return { 
      getProcesses: getProcesses 
     }; 

     function getProcesses() { 
      // return $http.get('data\processes.json') 
      //  .then(getProcessesComplete) 
      //  .catch(getProcessesFailed); 

      // function getProcessesComplete(response) { 
      //  return response.data.results; 
      // } 

      // function getProcessesFailed(error) { 
      //  console.log('Error retrieving processes. ' + error.data); 
      // } 

      return { 
       "processes": [ 
        { 
         "name": "mergeFiles", 
         "id": 1, 
         "description": "Merge files in /files on server 3", 
         "scheduledRun": { 
          "startTime": "2016-06-27T18:25:00", 
          "endTime": "2016-06-27T18:26:00" 
         } 
        }, 
        { 
         "name": "monthlyImport", 
         "id": 2, 
         "description": "Import records on server 1", 
         "scheduledRun": { 
          "startTime": "2016-06-01T12:00:00", 
          "endTime": "2016-06-01T18:05:00" 
         } 
        }, 
        { 
         "name": "tickeTrakBilling", 
         "id": 3, 
         "description": "...", 
         "scheduledRun": { 
          "startTime": "2016-06-27T19:15:00", 
          "endTime": "2016-06-27T18:20:00" 
         } 
        }, 
        { 
         "name": "batch092", 
         "id": 4, 
         "description": "run batch092.bat on server 4", 
         "scheduledRun": { 
          "startTime": "2016-06-27T1:25:00", 
          "endTime": "2016-06-27T11:26:00" 
         } 
        } 
       ] 
      }; 
     } 
    }); 

今コントローラであります構文ように、コントローラを使用して書かれた以下の通り

controller('ProcessController', ProcessController); 

function ProcessController(dataservice) { 
    var vm = this; 
    var dataService = dataservice; 

    vm.processes = dataService.getProcesses(); 
} 

今コントローラは、JSONオブジェクトを

を露出させるべきテンプレートは次のとおり

<div class="container" ng-controller="ProcessController as vm"> 
<div class="job" ng-repeat="process in vm.processes"> 
    <!-- Header [Job Name] --> 
    <h3 class="job-name">{{ process.name }}</h3> 
    <!-- Body [Job details] --> 
    <div class="container"> 
     <p>{{ process.description }}</p> 
     <ul class="job-details"> 
      <li> 
       {{ process.scheduledRun.startTime }} 
      </li> 
      <li> 
       {{ process.scheduledRun.endTime }} 
      </li> 
     </ul> 
    </div> 
</div> 

次のような状態が定義されています

   .state('process', { 
       url: '/:month/:date', 
       templateUrl: '/app/templates/process.html', 
       controller: 'ProcessController', 
       controllerAs: vm 
      }); 

Answer 1

、のようになります。テンプレートのHTMLにあなたのng-controllerを削除し、あなたのコードは動作します： HTML controllerAsが動作しないいくつかのケースでも

<div class="container"> 
    <div class="job" ng-repeat="process in vm.processes"> 
    <!-- Header [Job Name] --> 
    <h3 class="job-name">{{ process.name }}</h3> 
    <!-- Body [Job details] --> 
    <div class="container"> 
     <p>{{ process.description }}</p> 
     <ul class="job-details"> 
     <li> 
      {{ process.scheduledRun.startTime }} 
     </li> 
     <li> 
      {{ process.scheduledRun.endTime }} 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

。その場合はcontroller: ProcessController as vmというシンタックスを使用してください。

Answer 2

は、このようなあなたのコントローラを書いて、結果を確認してください。

app.controller('ProcessController', ['dataservice', function(dataservie){ 
    var vm = this; 
    var dataService = dataservice; 

    vm.processes = dataService.getProcesses(); 
}]); 

Answer 3

以下のようにコントローラの上にdataserviceを注入してみます。

ProcessController.$inject = ['dataservice']; 

だからあなたのコントローラは、あなたがng-controllerとともに$routePoviderか$stateProviderを使用して定義controller as構文を使用することはできません

controller('ProcessController', ProcessController); 

ProcessController.$inject = ['dataservice']; 

function ProcessController(dataservice) { 
    var vm = this; 
    var dataService = dataservice; 

    vm.processes = dataService.getProcesses(); 
}