從AngularJS中的函數生成後，數組未顯示在視圖中

因此，我有這種將產品分組到各自類別的簡單功能。你也可以看到我在超時時間內調用函數。從AngularJS中的函數生成後，數組未顯示在視圖中

問題是，即使console.log（）的工作方式應該如此，我在我的視圖中看不到任何東西。

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>

所有我在我的觀點看是[]

我缺少什麼？

UPDATE

我搬到這個功能到服務，並把它作爲我的路線的決心。我仍然面臨同樣的問題。這是我的。

.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; 
     } 
    } 
})

然後在我的路線我有這樣的決心：

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

那麼這是在我的控制器中加載

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

    var admin = this; 

    $scope.sortedProducts = categorySortedProducts; 

    console.log($scope.sortedProducts); 


    ... 

})

（^^的作品的console.log的方式！）

然後終於在我的HTML視圖中，我只是有這個：

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

我的控制器已加載到我的路由中，並以管理員身份加載。（productsCtrl作爲管理員）。

更新2

所以它看起來像的console.log（）是一種奇怪的。這就是它的樣子：

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

這是正常的，爲父母顯示數組[0]？試圖找出問題。

來源

2016-08-08 Mitch Evans

您的視圖正在查看範圍，但您的admin變量是本地定義的，並未附加到Angular的範圍。

更改代碼：

$scope.admin.sortedProducts = temp;

那麼爲什麼它在你看來一個console.log，而不是工作？因爲視圖正在查看控制器的範圍。但是你的console.log正在尋找不需要在Angular範圍內的本地命名空間。

來源

2016-08-08 22:57:14

我以爲同樣的事情，但事實證明OP使用的是controllerAs語法，而'admin'實際上是'this'的本地引用。其他的事情顯然還在繼續，但考慮到發佈的代碼，它不太可能被診斷。 – Lex

我更新了我的問題。請再看一遍。 –

@Lex我不知道更多的代碼給你。 –

我改變了我的承諾以下。

var temp = [];

到

var temp = {};

而現在一切都在我的視圖顯示出來。我猜這是因爲我的數據不是按順序設置的，如[]通常用於。

來源

2016-08-09 00:37:16

從AngularJS中的函數生成後，數組未顯示在視圖中

回答

相關問題