javascript - 异步 Angular/Node $scope 调用

Question

这里是 Angular 的新手，我有一个问题需要一些帮助。基本上，我需要选择用户可以点击的项目。单击某个项目时，页面需要显示该项目的一些属性，如描述等。第一部分没有问题，但我在显示数据的第二部分遇到了问题。所以这就是我所拥有的:

在前端，我有一个 Angular ng-click chooseItem(item) 函数，它将被点击的 item 作为它的参数:

<div ng-repeat="item in items" class="col-xs-2 col-md-1">
   <div ng-click="chooseItem(item)" class="thumbnail">
        <img src="/images/items/{{item.name}}.png"/>
    </div>
</div>

然后通过 items.getChosenItemData(item) 函数将其传递给 items 工厂。由于真实的项目数据存储在 Mongo 而不是工厂中，因此此函数查询数据库以检索项目数据。检索到的数据存储到 chosenItem 对象中，然后作为 $scope.chosenItem 传递回 Controller 。

app.factory('items', ['$http', function($http){
    var objects = {
        items: [
            // ... more items before these

            {name: "Pencil"},
            {name: "Pen"}
            /* I use these item objects as keys to the items themselves.
               The ng-repeat iterates through all of the names for each item
               which allows me to display static images for each item to the page.
               There aren't many items, about 100, but they have tons of json information
               so to hardcode it all into here is not an option
               A way to do this without any hardcoding would be nice! */

            // more items after these

        ],

        // this is used to store a currently clicked item's values
        chosenItem: null 

    }

    objects.getChosenItemData = function(name){
        return $http.get('/items/' + name).success(function(data){
            // console.log(data);
            angular.copy(data, objects.chosenItem);
            console.log("Chosen Item: ", objects.chosenItem);
        })
    }
    return objects
}]);
app.controller('MainCtrl', [
   '$scope',
   'items',
    function($scope, items){
       $scope.items = items.items;
       $scope.chosenItem = null;

       $scope.chooseItem = function(item){
           items.getChosenItemData(item.name);
           $scope.chosenItem = items.chosenItem; //chosen item object attribute in factory
           console.log("$scope item: ", $scope.chosenItem);
       }
    }
});

这几乎都有效。我可以成功查询到点击项的数据，但是返回是另外一回事了。第一次点击时，$scope.chosenItem 的值为 null。然后在第二次点击时，它存储点击项的值。这也会导致以下问题:如果我单击 n 个项目，存储的值始终是 n-1 项目的值，而不是当前项目的值。我需要它在第一次点击时存储点击项目的值，而不是第二次点击。

我觉得我需要在此处的某处添加回调以使其正常工作，但我是 Angular/JS 的新手，所以我不确定它应该去哪里。

感谢您的帮助!此外，任何关于 Angular 设计模式的提示或线索都将不胜感激，因为我觉得这是一个看起来相当简单的东西的糟糕实现。

Answer 1

我建议你直接暴露服务:

$scope.serviceItem = items; 

然后你可以像这样在 View 中调用它:

{{serviceItem.chosenItem}} 

它将始终更新为最新的点击值。

希望对你有帮助。