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>

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？我觉得这应该是非常简单和基本的事情，但我现在要么缺乏睡眠，要么缺乏智慧。请帮助。

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

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

然后使用它将是这样的：

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

---

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

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

然后使用它将是这样的：

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

那就这样说吧

navGetCategories.getResource(sectionID).query();

那就这样说吧

navGetCategories.getResource(sectionID).query();

---

这导致html输出没有发生任何事情，没有错误消息，没有更改。navGetCategories.getResource（sectionID）.query（）应该可以工作。这导致html输出没有发生任何事情，没有错误消息，没有更改。navGetCategories.getResource（sectionID）.query（）应该可以。当我尝试这段代码时，我得到了以下错误：ReferenceError:sectionId没有定义等等，这看起来像是一个打字错误。我的示例似乎被错误地简化了：）嘿，这确实有效！非常感谢。如果我要求你解释这是如何工作的，那会很糟糕吗？因此，当你使用

.factory

，无论你返回什么，你的控制器都可以与之交互。您直接返回了一个资源对象。这当然是法律代码，但在您的情况下，在您拥有id之前，您不知道如何创建该资源对象，因此您真正想要的是一个函数，它获取id，然后返回一个资源对象。我将该函数命名为

getResource

。服务上有很多函数是很常见的，因此我将其包装到一个对象中（名为

service

），这样如果您以后决定需要更多函数，它们很容易添加到该对象中我在尝试此代码时遇到以下错误：ReferenceError:sectionId未定义等等，这似乎是一个输入错误。我的示例似乎被错误地资本化了：）嘿，这确实有效！非常感谢。如果我要求你解释这是如何工作的，那会很糟糕吗？因此，当你使用

.factory

，无论你返回什么，你的控制器都可以与之交互。您直接返回了一个资源对象。这当然是法律代码，但在您的情况下，在您拥有id之前，您不知道如何创建该资源对象，因此您真正想要的是一个函数，它获取id，然后返回一个资源对象。我将该函数命名为

getResource

。服务上有许多函数是很常见的，因此我将其包装到一个对象中（名为

service

），这样，如果您以后决定需要更多函数，就可以很容易地将它们添加到该对象中