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，然后使用而不是WP循环ng-repeat，但是它将要求我重写更多的代码。

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

如果我的问题太乱，我可以带来网页快照和更清晰的解释。谢谢

Answer 1

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

ngInit的唯一合适用途是对ngRepeat的特殊属性进行别名，如下面的演示所示。除了这种情况，你应该使用控制器而不是ngInit来初始化范围上的值。

但是，既然你正在使用Angular和PHP，我不确定这个建议是否仍然存在。

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

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

将多个php变量传递给作用域对象列表

1 个答案: