Question

我是AngularJS的新手（已完成1.6中的一些教程），并希望在Controller中使用$ http变量来理解API调用。我有API，它提供有关所有用户的JSON信息（例如/ api / users）和另一个API，它提供给定用户的详细信息（例如/ api / user / id）。现在我尝试使用函数调用getUserDetails为/ users页面中的每个用户创建一个指向/ user / id页面的链接。

问题：我无法在/ user / id页面中看到用户数据，但/用户加载正常

问题：如果我使用chrome调试器，我看到/ users http call工作正常。实际上，点击任何用户链接也会在第11行遇到调试器语句，但稍后它也会在5点击中调试器。

为什么这会进入第5行调试器（主要是因为我的＆＃34;用户＆＃34;变量未在html页面中获得）？
这有什么解决方法吗？在第3行声明用户变量会有帮助吗？（没有亲自尝试过，我觉得这不是正确的方法吗？）
稍微在API的设计方面 - 让我说我有/ api / users中所有用户的描述。在这种情况下，我如何修改控制器（和html）以便将特定用户信息传递给新页面？这种方法是推荐的吗？

约束：我无法在没有$ scope变量的情况下加载它，因此任何涉及$ scope的建议都会有所帮助。＆＃34;原料＆＃34;现在还需要tag来忽略PHP解析。

尝试搜索现有问题，但找不到太多信息。如果由于缺少好的关键字，请指出任何有用的现有答案。：）

下面是userlist.htm（显示所有用户的列表）

{% raw %}
<div ng-controller="UserController">
    <div ng-repeat="user in users">
        <h3><a href="/user/{{ user.id }}" ng-click="getUserDetails(user.id)">{{ user.name }}</a></h3>
        <!-- userdetails.htm is called with this -->
    </div>
</div>
{% endraw %}
{% put scripts %}
    <script src="{{ 'assets/javascript/UserController.js'|theme}}"></script>
{% endput %}

userdetails.htm（显示任何所选用户的详细信息）

{% raw %}
<div ng-controller="UserController">
    <h3>{{ user.name }}</h3>
    <!-- Some more user information here-->
</div>
{% endraw %}

{% put scripts %}
    <script src="{{ 'assets/javascript/UserController.js'|theme}}"></script>
{% endput %}

此处定义的AngularJS控制器：

app.controller("UserController", ['$scope', '$http', '$log', function ($scope, $http, $log) {
    var userCtrlScope = $scope;

    $http.get('/api/users').then(function(data){
        debugger;
        userCtrlScope.users = data;
    });

    userCtrlScope.getUserDetails = function(id){
        $http.get('/api/user/' + id).then(function(data) {
            debugger;
            userCtrlScope.user = data;
        });
    };
}]);

谢谢！

Answer 1

我不知道您需要href="/user/{{ user.id }}"的原因，它会转到user/5路线。如果是去往这条路线的目标，那么您应该为该路线分隔控制器，并在其中调用$http.get('/api/user/' + id)，例如，从id {$routeParams调用$routeParams.id {1}}）如果您使用angularjs路由器或$stateParams（$stateParams.id），如果您使用UI路由器。您如何加载userdetails.htm？

成功调用api2后，再次调用$ http.get（api）

1 个答案: