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

I'm having trouble displaying the items of an array returned from a service in the template. I believe I'm using the controller as syntax correctly, it is used in my controller, template, as well as in my .config() $state (ui-router) block. But for some reason it is not displaying anything on the page.

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

I tried debugging in chrome and when I placed a break point in the controller, vm.processes held the object (an array with 4 items, everything checked out) but again nothing was displayed in the view, which is odd b/c vm. exposes anything in the controller so it should be able to be accessed from the template.

我尝试在chrome中调试,当我在控制器中放置一个断点时,vm.processes保存了对象(一个包含4个项目的数组,所有内容都已检出)但是视图中没有显示任何内容,这是奇怪的b / c vm。暴露控制器中的任何内容,以便能够从模板中访问它。

I defined a simple service that returns a JSON object, I was having trouble grabbing the file itself using $http so I just opted to hardcode the values in the service file:

我定义了一个返回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"
                        }
                    }
                ]
            };
        }
    });

now the controller is written using the Controller As syntax:

现在使用Controller As语法编写控制器:

controller('ProcessController', ProcessController);

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

    vm.processes = dataService.getProcesses();
}

so now the controller should expose JSON object

所以现在控制器应该公开JSON对象

the template is as follows:

模板如下:

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

The state is defined as follows:

州的定义如下:

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

3 个解决方案

#1

You cannot use controller as syntax defined using $routePovider or $stateProvider along with ng-controller. Remove your ng-controller in template html and your code will work: HTML

您不能将控制器用作使用$ 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>

Also in some cases controllerAs doesn't work. Try using controller: ProcessController as vm syntax in that case

在某些情况下,控制器也不起作用。在这种情况下,尝试使用controller:ProcessController作为vm语法

#2

write your controller like this and check the result.

像这样写你的控制器并检查结果。

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

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

#3

Try to inject dataservice above your controller function like below.

尝试将dataservice注入控制器函数之上,如下所示。

ProcessController.$inject = ['dataservice'];

So your controller will be like,

所以你的控制器就像,

controller('ProcessController', ProcessController);

ProcessController.$inject = ['dataservice'];

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

    vm.processes = dataService.getProcesses();
}

#1