Angular controller is not binding service object property ng-repeat

Question

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.

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.

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:

.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('ProcessController', ProcessController);

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

    vm.processes = dataService.getProcesses();
}

so now the controller should expose JSON object

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

score 0 · Answer 1 · answered Apr 27 '16 at 04:57

0

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

answered Apr 27 '16 at 04:57

Laxminarayan

188
2
16

So I've tried to move away from manually annotating the dependencies when registering controllers just because it can get messy or just easy to mix up the order. But I did it this way and it also didn't display anything in the view. I'm not sure what could be the problem – Apr 27 '16 at 05:49
Upload your code to plunker or jsfiddle so I can help you. – Laxminarayan Apr 27 '16 at 06:13
I had to change some of the code because it relies on other files that aren't relevant to this question. https://plnkr.co/ZHCydSbiOOVKjRC6WCrf – Apr 27 '16 at 06:30

score 0 · Answer 2 · answered Apr 27 '16 at 05:16

0

Try to inject dataservice above your controller function like below.

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

answered Apr 27 '16 at 05:16

Amir Suhail

1,284
3
12
31

Thanks for the reply, I tried doing passing the dataservice to $inject but it still didn't display the processes array – Apr 27 '16 at 05:46

score 0 · Accepted Answer · answered Apr 27 '16 at 05:59

0

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

<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

answered Apr 27 '16 at 05:59

Aditya Singh

15,810
15
45
67

I didn't know that one couldn't have both, but it makes sense if one has already defined it in the $stateProvider. Unfortunately this didn't resolve my issue. The two li's show but there is nothing on there but the two bullet points. – Apr 27 '16 at 06:19
That's because you are returning an object `{processes: []}` from your service and assigning it to an array `vm.processes`. Either change the response from service to be an array or in your controller change your code as `vm.processes = dataService.getProcesses().processes` – Aditya Singh Apr 27 '16 at 06:22
Wow, I completely missed that. For testing purposes do you believe it's better to keep the object and use dot notation to access the array or simply return the array from the service – Apr 27 '16 at 06:35

Angular controller is not binding service object property ng-repeat

3 Answers3

Linked