Question

这是我的第一个问题，所以如果我违反任何协议，我会道歉。无论如何。我正在尝试在我的服务电话的ng-repeat条款中进行then更新。用例：用户通过ajax呼叫登录，然后呼叫该用户的“项目”。例如，以下是我的控制器中的内容：

appControllers.controller('UserCtrl', function($rootScope, $scope, sessionService, alertService, $modal, itemService){
    $scope.login = function() {
        $scope.loggedInUsersItems = [];
        sessionService.login($scope.account).then(
                function(data) {
                    alertService.add('success', 'You are logged in.');
                    itemService.getItemsByUserName($rootScope.loggedinUserName).then(
                            function(data){
                                $scope.loggedInUsersItems  = data.data;
                            }
                    )
                },
                function() {
                    alertService.add('danger', 'There was a problem logging in. Check your credentials and try again.');
                }
        )
    };
...

我想我在堆栈和其他地方查看了每个问题，我继续旋转我的车轮。我尝试了$scope.$apply()，但这导致预期的摘要已经发生错误。我还尝试.push()并迭代推送，并将itemService.getItemsByUserName置于链式then中，但没有运气。我是Angular的新手，但我相信我理解$ scope不在服务层，所以我想避免这种情况。

我应该提一下，登录过程运行良好，我在登录服务中设置了一些$rootScope项，我看到我的视图更新是因为成功登录（例如经过身份验证的div显示和成功的消息）。唯一没有更新的是我的ng-repeat。编辑以提供更多详细信息：触发登录时，下面的代码段已在视图中。使用模式完成登录 - 用户填写凭据并点击登录并触发控制器。不确定这些信息是否会发生变化，但我认为我会尝试提供更多详细信息。

    <div ng-show="authenticated">
...
<tr class="text-left" ng-repeat="item in loggedInUsersItems">
                        <td>{{ item.itemName }}</td>
                        <td>{{ item.itemType }}</td>
                    </tr>
...
</div>

以下是我服务中的代码段：

 ... 
service.getItemsByUserName = function(username){
        return $http.get('useritems',  {params: { username: username }})
    }; 
...

Answer 1

使用对当前范围的引用来使控制器保持当前状态。尝试 AngularJS的Controller As和vm Variable

appControllers.controller('UserCtrl', function($rootScope, $scope, sessionService, alertService, $modal, itemService){
var vm=this;
vm.login = function() {
    vm.loggedInUsersItems = [];
    sessionService.login(vm.account).then(
            function(data) {
                alertService.add('success', 'You are logged in.');
                itemService.getItemsByUserName($rootScope.loggedinUserName).then(
                        function(data){
                            vm.loggedInUsersItems  = data.data;
                        }
                )
            },
            function() {
                alertService.add('danger', 'There was a problem logging in. Check your credentials and try again.');
            }
    )
};

HTML

<div ng-controller="UserCtrl as vm">
<tr class="text-left" ng-repeat="item in vm.loggedInUsersItems">
                    <td>{{ item.itemName }}</td>
                    <td>{{ item.itemType }}</td>
                </tr>

Answer 2

我看到你正在做的事情：

sessionService.login($scope.account)

返回一个解析的promise，你的.then（）..代码会执行。大概你看到这种情况发生了，没关系。您的alertService正确触发.add方法。您调用以下行，该行也返回一个承诺：

itemService.getItemsByUserName($rootScope.loggedinUserName)

这也解析了你的.then（），并尝试将绑定变量设置为从promise中检索到的新值：

$scope.loggedInUsersItems  = data.data;

您是否可以记录console.log（$ scope.loggedInUserItems）以查看它是否正确获取了值，该值是一个对象列表，每个对象都包含一个名为itemType和itemName的属性？最后一部分是至关重要的，因为如果返回的对象的格式与您的html不匹配，它将不会显示任何内容。

http.then

2 个答案: