关于在AngularJS中控制器和服务之间传递变量的困惑

时间:2017-09-14 23:34:48

标签: javascript angularjs

我刚开始学习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>

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

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:2)

navGetCategories.getResource(sectionID).query();

然后将其称为

{{1}}