javascript - 在 AngularJS 中 Controller 和服务之间传递变量的混淆

Question

我刚开始学习 AngularJS。我知道这已被多次询问，但我就是不明白。在阅读此处的示例代码和在我的 IDE 中摆弄之间，我已经花了好几个小时了。

我有以下代码，它应该检索项目的部分键，然后将该键传递给使用 API 的服务，以提供基于该键填充类别的响应。单击分区表行时会发生这种情况。

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>

导航 Controller

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

导航服务.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 }        
        });
    }
]);

如何从 navController 获取值到 navService 以便它可以使用该值来查询 API？我觉得这应该是非常简单和基本的东西，但我现在要么缺乏 sleep ，要么缺乏智慧。请帮忙。

Answer 1

您需要将您的服务更改为如下内容:

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

然后使用它会是这样的:

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