0

我是新來AngularJS並決定嘗試一下。正如我讀到的,我可以簡單地插入現有的HTML,它會工作。現在我困在這一點上。 這裏是我的縮短PHP代碼與WordPress和angularjs:傳遞多個PHP變量的作用域對象列表

<?php 
$the_query = new WP_Query(array('post_type' => 'products', 'nopaging' => 'true')); 
    <div class="container"> 
     <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 
      <?php $name   = get_field("name"); ?> 
      <?php $tree   = get_field("tree"); ?> 
      <div class="material" ng-click="productMaterial(product)" 
       ng-init="product={name:'<?php echo $name; ?>',tree:'<?php echo $tree; ?>'};"> 
      </div> 
     <?php endwhile; ?> 
    </div> 

循環完成,然後根據HTML源代碼後,所有的NG-inits <div class="material"> -s取得正確的值:

<div class="material" ng-click="productMaterial(product)" ng-init="product={name:'Castello',tree:'oak'};"></div>
..
<div class="material" ng-click="productMaterial(product)" ng-init="product={name:'Variostep CL',tree:'oak'};"></div>

我的控制器:

calculator.controller('Calc1ProductController', ['$scope', 'calc1Service', function($scope, calc1Service) { 

    $scope.productMaterial = function(product) { 
     console.log("Clicked product: " + $scope.product.name); // print always Variostep CL 
    }; 
}]); 

所以問題是,每次我點擊任意產品,總是最後產品被印在控制檯是Variostep CL。我瞭解循環中的每個新循環都會覆蓋以前的產品對象,並且只保存最後一個產品。

怎麼可能通過產品數據,因此,每當我在網頁上點擊,正確的產品數據被記錄到控制檯?

正如我已經看到,其他方法是使用純的angularjs方法,我做API請求並接收JSON,然後使用而不是WP循環ng-repeat,但是這將需要我重寫更多的代碼。

我想做出一個遞增的計數器和產品儲存數組,然後在角度控制器的索引訪問或者或許是有一些簡單的方法?

如果我的問題是太亂了,我可以把網頁快照,更清楚的解釋。謝謝

回答

0

http://docs.angularjs.org/api/ng.directive:ngInit

唯一的適當使用ngInit是走樣的ngRepeat特殊屬性,如下面的演示看到的報價。除了這種情況下,你應該使用控制器而不是ngInit對一個範圍內初始化值。

但是,既然您使用的是PHP的Angular,我不確定這個建議是否仍然有效。

我認爲你總是看到最後一個產品的原因是因爲你持續覆蓋你的控制器中的同一塊數據,並且你所擁有的PHP代碼循環使用ng-init聲明。實際上,如果我沒有弄錯,你的控制器通過使用ng-init實際上定義了$scope.product。所以,你所有ng-click調用將使用共享$scope.product作爲他們的論點。

作爲一個建議,如果有可能一次獲得所有的產品數據(即作爲一個數組),您應該這樣做,將數據存儲到您的控制器,然後利用ng-repeat使Angular爲每件產品數據創建HTML。

+0

嘿,謝謝你的建議。事實上就是這樣,我擔心我必須將它重新制作成ng-repeat。 – Skyzer