javascript - 防止 Angular 每秒绑定(bind)

Question

我正在使用 ng-repeat 在表格中显示用户。其中一列“状态”由函数计算，可以返回值“事件”、“空闲”或“锁定”。该函数使用当前日期时间来计算。

如果 LastAccess 是在过去 5 分钟内，则会显示“事件”状态。

表格如下所示:

这是 HTML 标记:

<tr ng-repeat="user in UserTable.Rows" ng-click="openUser(user.UserID)">
  <td>{{user.FirstName}} {{user.LastName}}</td>
  <td>{{user.Email}}</td>
  <td>{{user.OfficeName}}</td>
  <td>{{user.DeptName}}</td>
  <td>{{user.RoleName}}</td>
  <td><span class="label label-{{getStatus(user)=='Idle'?'default':(getStatus(user)=='Locked'?'danger':'success')}}">{{getStatus(user)}}</span>    </td>
  <td>{{user.LastAccess|timeAgo}}</td>
</tr>

这是 getStatus 的函数:

$scope.getStatus = function (usr) {
  if (usr.Locked) return 'Locked';
  if (!usr.LastAccess) return 'Idle';
  var diff = (new Date().getTime() - new Date(usr.LastAccess).getTime()) / 1000;
  console.log(diff);
  if (diff < 300) return 'Active'; else return 'Idle';
}

问题是每个用户每秒调用该函数 3 次(根据 console.log 函数)。我明白为什么它被调用三次(因为它在 HTML 中使用了三次)。但我可以阻止它每秒更新吗？每分钟调用一次该函数对我来说就足够了。我该怎么做？

是否有更好的方法可以在不创建过滤器的情况下执行此操作？

Answer 1

不要执行元素中的函数。相反，为显示状态的元素编写指令。然后在指令内使用 $interval 来调用更新程序函数。

将用户索引作为属性包含在元素中。像这样的事情:

<span statusupdater useridx={{UserTable.Rows.indexOf(user)}}></span>

现在指令是这样的:

myApp.directive('statusupdater', function($interval) {
        return {            
            link: function (scope, element) {

                function update(scope, ele) {

                    var userIdx = ele.attr("useridx");
                    var user = scope.UserTable.Rows[userIdx];

                    //Now process your user and change the style(or class) and html of the 
                    //span element accordingly                    
                };            

                $interval(function(){
                    update(scope, element);
                }, 18000);

        }
 }

现在更新函数将在每个范围内每 3 分钟执行一次。它根据用户状态改变每个span的class和html。

请注意，此方法会创建闭包，并且如果您在单个页面中有很大的列表，则可能不适合。在这种情况下，您需要以不同的方式引用范围和元素。

另请注意，如果您使用分页显示用户列表，您应该跟踪 $interval 调用返回的 promise 并适当取消它们。

更新如果您自动更新 html(如问题中所述每秒一次？)，还要确保添加一些条件以仅执行一次指令。或者只要在您的控制范围内禁用它即可。