Question

我在<td>制作的表格中显示ng-repeat时遇到问题。

如果<td>（使用vm.editDeleteButtonsVisibile语法）为真，则应根据条件显示表中的最后一个Controller-As。默认情况下，此值为false，但是当我将其更改为true时，UI不会反映更改。

这就是我的<tbody>看起来的样子：

<tbody ng-controller="EditProductController as vm"> <!-- This ng-controller is somewhere else -->
    <tr ng-repeat="product in vm.products">
        <td>{{ product.productName}}</td>
        <td>{{ product.productCode }}</td>
        <td>{{ product.releaseDate | date }}</td>
        <td>{{ product.price | currency }}</td>
        <td width="15%" ng-if="vm.editDeleteButtonsVisible"> <!-- Error Here -->
            <button type="button" class="btn btn-default" ng-click="vm.editItem(product.productCode)">Edit</button>
            <button type="button" class="btn btn-danger" ng-click="vm.deleteItem(product.productCode)">Delete</button>
        </td>
    </tr>
</tbody>

这是我正在更新值vm.editDeleteButtonsVisible：

的控制器

var EditProductController = function() {
    vm.editDeleteButtonsVisible = false; // Default value

    vm.showEditDeleteButtons = function() {
        vm.editDeleteButtonsVisible = true;
        console.log(vm.editDeleteButtonsVisible); // Prints true, so value was updated
    }
}

这是从另一个视图调用vm.showEditDeleteButtons()的方式：

<div id="editProductBtn" ng-controller="EditProductController as pvm">
    <button type="button" class="btn btn-default" ng-click="pvm.showEditDeleteButtons()">Edit Products</button>
</div>

问题可能是我已经宣布ng-controller="EditProductController"了吗？我在主视图中声明了一次，在另一个视图中声明了另一次。

Answer 1

您的问题是您要两次定义控制器。角度控制器不是单例。所以你要创建它的两个实例。您正在更新其中一个变量并在另一个中查找它。这不行。

<div id="editProductBtn" ng-controller="EditProductController as pvm">

和

<tbody ng-controller="EditProductController as vm">

创建两个实例。您需要做的是使用一个控制器或创建一个服务（它是一个单身人士）并在服务中保存变量。

ng-click不自动更新UI

1 个答案: