angular.element() 找不到 DOM 元素答案

【问题标题】：angular.element() cannot find DOM elementangular.element() 找不到 DOM 元素
【发布时间】：2017-01-01 10:10:53
【问题描述】：

我有一个从 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 时，它工作正常。

【问题讨论】：

显示你的 DOM 结构
你在项目中使用jQuery吗？试试angular.element().find('#users tr td[data-user-id="' + user.id + '"]')
您必须展示更多代码。它不能在代码中工作并且不能在控制台中工作的一个可能原因是当您执行这些行时元素尚未出现在 DOM 中。
添加了 DOM 结构。项目中没有使用 jQuery
soo... 你在哪里分配 $scope.users ？

标签： javascript angularjs firebase firebase-realtime-database

【解决方案1】：

将你的循环放在viewContentLoaded event 中。看起来事情是异步的。

$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
    }
});

【讨论】：

@user2181948 $scope.users在哪里？

【解决方案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) {
           ...
        }
    }
};

【讨论】：