0

我是 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 循环，但是这将需要我重写更多代码。

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

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

4

1 回答 1

0

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

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

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

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

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

于 2014-02-13T04:30:18.620 回答