Question

这里对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函数将其传递给items.getChosenItemData(item)工厂。由于实际项目数据存储在Mongo而不是工厂中，因此该函数会查询数据库以检索项目数据。此检索的数据存储在chosenItem对象中，然后作为$scope.chosenItem传回控制器。

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;

然后你可以在视图中调用它：

{{serviceItem.chosenItem}}

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

我希望它有所帮助。

Async Angular / Node $ scope调用

1 个答案: