javascript - ng-click 不自动更新 UI

Question

我无法显示 <td>在我的 ng-repeat生成表。

最后<td>在表中应根据条件显示，如果 vm.editDeleteButtonsVisibile (使用 Controller-As 语法)为真。默认情况下，此值为 false，但当我将其更改为 true 时，UI 不会反射(reflect)更改。

这就是我的 <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 的 Controller :

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()正在被调用，从另一个 Angular 看:

<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" ？我在它的主视图中声明一次，另一次在单独的 View 中声明。

Answer 1

您的问题是您定义了两次 Controller 。 Angular Controller 不是单例。所以你正在创建它的两个实例。您正在其中一个中更新变量并在另一个中查找它。这行不通。

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

和

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

创建两个实例。 您需要做的是使用一个 Controller 或创建一个服务(这是一个单例)并将变量保存在服务中。