角度控制器沒有綁定服務對象屬性ng-repeat

Question

我無法顯示從模板中的服務返回的數組的項目。我相信我正確地使用控制器作爲語法，它用在我的控制器，模板以及我的.config（）$狀態（ui-router）塊中。但由於某種原因，它不會在頁面上顯示任何內容。

我試着在chrome中進行調試，當我在控制器中放置一個斷點時，vm.processes持有對象（一個包含4個項目的數組，全部檢出），但在視圖中沒有顯示任何內容，這是奇數b/c vm。在控制器中公開任何內容，因此應該可以從模板中訪問它。

我定義了一個簡單的服務，返回JSON對象，我遇到了麻煩，使用抓取文件本身$ HTTP所以我選擇了硬編碼在服務文件中的值：

.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

您不能使用通過$routePovider或$stateProvider與ng-controller一起定義controller as語法。在HTML模板中刪除您ng-controller，你的代碼將工作： HTML

<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> 

而且在某些情況下controllerAs不起作用。在這種情況下，嘗試使用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']; 

所以你的控制器會是怎樣，

controller('ProcessController', ProcessController); 

ProcessController.$inject = ['dataservice']; 

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

    vm.processes = dataService.getProcesses(); 
}