1

简单的html：

<table class="table table-condensed">
 <tr data-ng-repeat="customer in customers" data-ng-class="customerSelectedClass(customer)">
  <td>
    <a href="" data-ng-click="selectCustomer(customer)">{{customer.Name}}</a>
  </td>
 </tr>
</table>

在我的控制器中-选择客户并返回适当的类以突出显示表格行的两个功能：

$scope.customerSelectedClass = function (customer) {
            if (customer == $scope.selectedCustomer) {
                console.log('returing info for ' + customer.Name);
                return "info";
            }
            return "";
        };

        $scope.selectCustomer = function (customer) {
            console.log('selecting ' + customer.Name);
            $scope.selectedCustomer = customer;
        }

我注意到当我单击客户链接时，customerSelectedClass 函数执行了两次。ng-click 指令上的 selectCustomer 函数应该执行一次。Angular 在页面上只包含一次。我想知道这是 Angular 中的错误还是我做错了什么？

4

1 回答 1

4

在幕后，Angular$watch在解析类名的函数上设置了一个。因为 Angular 使用脏检查来查看是否有变化，所以这个方法会在$digest循环中被调用两次。还行吧。

我建议您不要将此代码添加到控制器中，因为如果您管理许多 css 类，您可能会添加很多不必要的代码。尝试这样的事情：

<table class="table table-condensed">
 <tr data-ng-repeat="customer in customers" data-ng-class="{'info': customer == selectedCustomer}">
  <td>
    <a href="" data-ng-click="selectCustomer(customer)">{{customer.Name}}</a>
  </td>
 </tr>
</table>

那么，就不需要控制器功能了customerSelectedClass。这只会info在右侧:解析为 true 时添加类。并且在ng-repeat.

希望这可以帮助。

于 2013-11-10T20:33:36.370 回答