Question

我有一个用户表，可以从Firebase数据库中动态填充：

<table id="users">
    <thead>
       ...
    </thead>
    <tbody>
       <tr ng-repeat="user in users">
          <td data-user-id="{{user.$id}}">{{user.$id}}</td>
       </tr>
    </tbody>
</table>

function loadUsers($scope, DatabaseFactory) {
    DatabaseFactory.users.on('value', function(snapshot) {
        var users = snapshot.val();

        for(var id in users) {
            var user = users[id];

            // Find cell with user ID
            var element = angular.element('#users tr td[data-user-id="' + user.id + '"]'); // 1
            console.log(element); // 2
        }
    });
};

在loadUsers()中，我正在尝试查找包含特定用户ID的单元格。上面的log语句返回一个长度为0的数组。为什么会发生这种情况？当我在Chrome控制台中尝试使用语句1和2时，它可以正常工作。

Answer 1

将你的循环置于viewContentLoaded事件中。它看起来像是无关紧要的。

$scope.$on('$viewContentLoaded', function () {
    for (var id in users) {
        var user = users[id];

        // Find cell with user ID
        var element = angular.element('#users tr td[data-user-id="' + user.id + '"]'); // 1
        console.log(element); // 2
    }
});

Answer 2

对我有用的是将loadUsers()转变为指令。在使用ngRepeat生成DOM元素后调用它。

HTML：

   <tr ng-repeat="user in users" load-users>

角：

var app = angular
    .module('app', ['firebase'])
    .directive('loadUsers', loadUsers);


function loadUsers($scope, DatabaseFactory) {
    return function(scope, element, attrs) {
        if (scope.$last) {
           ...
        }
    }
};

angular.element（）找不到DOM元素

2 个答案: