角度控制器不绑定服务对象属性 ng-repeat

Question

我在模板中显示从服务返回的数组项目时遇到问题。我相信我正确地使用控制器作为语法，它用于我的控制器、模板以及我的 .config（） $state（ui-router）块。但由于某种原因，它没有在页面上显示任何内容。

我尝试在 chrome 中进行调试，当我在控制器中放置断点时，vm.processes 保存了对象（一个包含 4 个项目的数组，所有内容都已签出），但视图中再次没有显示任何内容，这是奇怪的 b/c vm。 公开控制器中的任何内容，因此应该能够从模板访问它。

我定义了一个返回 JSON 对象的简单服务，我在使用 $http 获取文件本身时遇到问题，所以我只是选择对服务文件中的值进行硬编码：

.factory('dataservice', function dataservice($http) {
        return {
            getProcesses: getProcesses
        };
        function getProcesses() {
            // return $http.get('dataprocesses.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

不能使用controller as $routePovider或$stateProvider以及ng-controller定义的语法。删除模板 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

尝试在

控制器函数上方注入数据服务，如下所示。

ProcessController.$inject = ['dataservice'];

所以你的控制器会像，

controller('ProcessController', ProcessController);
ProcessController.$inject = ['dataservice'];
function ProcessController(dataservice) {
    var vm = this;
    var dataService = dataservice;
    vm.processes = dataService.getProcesses();
}