Question

简单的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中的错误还是我做错了什么？

Answer 1

在幕后，angular正在为解析类名的函数设置$watch。因为角度使用dirty checking来查看是否存在更改，所以此方法将在$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。

中解决正确的客户是没有问题的

希望这有帮助。

ng-class指令调用执行了两次

1 个答案: