javascript - 从 AngularJS 中的函数生成后，数组未显示在 View 中

Question

所以我有一个简单的功能，可以将产品分组到各自的类别中。您还可以看到我在超时内调用该函数。

问题是，尽管 console.log() 正常工作，但我在 View 中看不到任何内容。

function sortByCategories(){
        var temp = [];
        angular.forEach(admin.categories, function(category, value){
            angular.forEach(admin.products, function(product, value){
                angular.forEach(product.categories, function(prodCat, value){
                    if(prodCat.text == category.text)
                    {
                        if(!temp[category.text])
                        {
                            temp[category.text] = [];
                        }

                        temp[category.text].push(product);
                    }
                })
            })
        })
        admin.sortedProducts = temp;
    }

    $timeout(function(){
        sortByCategories();
        console.log(admin.sortedProducts); // This shows me what I expect.
    }, 3500);

在我看来，我的 html 只是 <pre>{{admin.sortedProducts | json}}</pre>

我在 View 中看到的只是 []

我错过了什么？

更新

我将此函数移至服务中，并将其作为解析放置在我的 route 。我仍然面临同样的问题。这是我所拥有的。

.factory('Products', function($rootScope, $timeout, $q, fbUrl, $firebaseArray){
    return {
        sortByCategories: function() {
            var temp = [];
            var deferred = $q.defer();
            var ref = new Firebase(fbUrl);
            ref.once('value', function(snapshot){
                var categories = snapshot.child('categories').val();
                var products = snapshot.child('products').val();

                angular.forEach(categories, function(category, value) {
                    angular.forEach(products, function(product, value){
                        angular.forEach(product.categories, function(prodCat, value){
                            if(prodCat.text == category.url)
                            {
                                if(!temp[category.url])
                                {
                                    temp[category.url] = [];
                                }

                                temp[category.url].push(product);
                            }
                        })
                    });
                });
                deferred.resolve(temp);
            })
            return deferred.promise;
        }
    }
})

然后在我的 route 我解决了这个问题:

...
resolve: {
   categorySortedProducts : function(Products){
       return Products.sortByCategories();
   }
}
...

然后将其加载到我的 Controller 中

.controller('productsCtrl', function($scope, categorySortedProducts){

    var admin = this;

    $scope.sortedProducts = categorySortedProducts;

    console.log($scope.sortedProducts);


    ...

})

(^^ console.log 可以正常工作!)

最后在我的 html View 中我只有这样:

<pre>{{sortedProducts | json}}</pre>

我确实在我的 route 加载了 Controller ，并且它以管理员身份加载。 (产品Ctrl作为管理员)。

更新2

所以看起来 console.log() 有点奇怪。它看起来像这样:

Array[0]
   category-one[12]
   categroy-two[15]

父级显示 Array[0] 正常吗？只是想找出问题。

Answer 1

我改变了以下 promise 。

var temp = [];

到

var temp = {};

现在一切都显示在我的 View 中。我猜这是因为我的数据没有像 [] 通常使用的那样按顺序设置。