将多个 php 变量传递给范围对象列表

Question

我是 AngularJS 的新手，并决定尝试一下。当我读到它时，我可以简单地插入现有的 HTML 并且它会工作。现在我被困在这一点上。 这是我使用 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，然后使用 ng-repeat 而不是 WP 循环，但是这将需要我重写更多代码。

我正在考虑创建一个递增计数器并存储产品数组，然后通过角度控制器中的索引进行访问，或者是否有一些更简单的方法？

如果我的问题太杂乱，我可以带网页截图和更清晰的解释。谢谢

Answer 1

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

ngInit 的唯一适当用途是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。

但是，由于您使用 Angular 和 PHP，我不确定这个建议是否仍然有效。

我认为您总是看到最后一个产品的原因是因为您不断地用您拥有的 PHP 代码循环的 ng-init 声明覆盖控制器中的同一条数据。实际上，如果我没记错的话，您的控制器实际上已经通过您使用 ng-init 定义了 $scope.product。因此，您所有的ng-click 调用都将使用共享的$scope.product 作为它们的参数。

作为建议，如果您可以一次获取所有产品数据（即作为数组），您应该这样做，将数据存储到您的控制器，然后使用ng-repeat Angular 为每条产品数据创建 HTML。