Confusion on passing variables between controller and service in AngularJS

Question

I just started learning AngularJS. I know this has been asked multiple times, but I am just not getting it. I've been at this for hours now, between reading example code here and fiddling about in my IDE.

I have the following code which is supposed to retrieve a section key for an item and then pass that key to a service which consumes an API to provide a response which populates the categories based on that key. This happens when a section table row is clicked.

The HTML

<div ng-controller="menuController">
    <h1>AngularTest</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
         <tbody>
            <tr ng-click="getSectionID($event)" ng-repeat-start="section in navSectionList" data-id="{{section.id}}">                    
                    <td>{{section.id}}</td>
                    <td>{{section.name}}</td>
            </tr>
            <tr ng-repeat-end="categories in navGetCategories">
                <td>{{categories.id}}</td>
                <td>{{categories.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

navController.js

var navApp = angular.module('navApp', ['ngResource']);

navApp.controller('menuController', ['$scope', 'navSectionList', 'navGetCategories',
    function ($scope, navSectionList, navGetCategories) {
        $scope.navSectionList = navSectionList.query();
        $scope.getSectionID = function (event) {

            var sectionID = event.currentTarget.attributes["data-id"].value;
            $scope.sectionID = sectionID;
            //console.log($scope.sectionID);

            $scope.navGetCategories = navGetCategories.query(sectionID);
        };   
    }
]);

navService.js

navApp.factory('navSectionList', [
    '$resource', function ($resource) {
        return $resource('/api/navigation/section/list', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });
    }
]);

navApp.factory('navGetCategories', [
    '$resource', function ($resource) {

        return $resource('/api/navigation/category/' + sectionID, {}, {
            query: { method: 'GET', params: {}, isArray: true }        
        });
    }
]);

How do I get the value from the navController to the navService so that it can use that value to query the API? I feel like this should be something incredibly simple and basic but I'm either lacking sleep or lacking smarts at the moment. Please help.

Nicholas Tower · Accepted Answer · 2017-09-15 00:22:34Z

2

You'll need to change your services to something like this:

navApp.factory('navGetCategories', ['$resource', function ($resource) {
    var service = {
        getResource: function(sectionID) {
            return $resource('/api/navigation/category/' + sectionID, {}, {
                query: { method: 'GET', params: {}, isArray: true }        
            });
        }
    }
    return service;
}]);

And then to use it will be something like this:

$scope.navGetCategories = navGetCategories
    .getResource(sectionID)
    .query();

edited Sep 15, 2017 at 0:22

answered Sep 14, 2017 at 23:41

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Iskandar Reza Over a year ago

I get the following error when I try this code: ReferenceError: sectionId is not defined

Iskandar Reza Over a year ago

Oh wait that seems like a typo.

Nicholas Tower Over a year ago

My example seems to have been miscapitalized :)

Iskandar Reza Over a year ago

Hey this actually works! Thank you. Would it be terrible of me to ask you to explain how this works?

Nicholas Tower Over a year ago

So, when you use .factory, whatever you return will be the thing that your controllers can interact with. You were directly returning a resource object. That's certainly legal code, but in your case, you don't know how to make that resource object until you have the id, so what you really want is a function that takes an id and then returns a resource object. I named that function getResource. It's common for services to have many functions on them, so i then wrapped it into an object (named service), so that if you later decide you want more functions, they're easy to add to that object

|

yesIcan · Accepted Answer · 2017-09-15 01:48:50Z

2

navApp.factory('navGetCategories', [
    '$resource', function ($resource) {

        return {
            getResouce:getResouce
        }
        function  getResouce(sectionID)  {
            return $resource('/api/navigation/category/' + sectionID, {}, {
                query: { method: 'GET', params: {}, isArray: true }
            });
        }
    }
]);

Then call it like

navGetCategories.getResource(sectionID).query();

edited Sep 15, 2017 at 1:48

answered Sep 15, 2017 at 0:09

yesIcan

1,7113 gold badges12 silver badges19 bronze badges

2 Comments

Iskandar Reza Over a year ago

This resulted in nothing happening, no error message, no change in the html output.

yesIcan Over a year ago

navGetCategories.getResource(sectionID).query() should work.

Collectives™ on Stack Overflow

Confusion on passing variables between controller and service in AngularJS

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related