Question

我需要通过他的ID获取一个元素，但是这个元素是从另一个html文件加载的。

这是我的index.html：

<div class="container" ng-controller="myCtrl">
    <div class="row">
        <div class="col-md-4">
            <div ng-include="foo.template"></div>
        </div>
    </div>
</div>

在myCtrl.js中：

app.controller('mainCtrl', ['$scope', function ($scope) {
    $scope.foo = {
        title: 'Title',
        template: 'views/myTemplate.html'
    };
    console.log(document.getElementById('test')) // Display null
}]);

myTemplate.html：

<div id="test">Check</div>
<script>
    console.log(document.getElementById('test')) // Never execute
</script>

如何使用ID＆＃39;测试＆＃39;

获取DOM元素

仅供参考，我需要为JS lib添加自定义滚动条。

Answer 1

您可以使用angular.element：

将原始DOM元素或HTML字符串包装为jQuery元素。

如果jQuery可用，angular.element是jQuery函数的别名。如果jQuery不可用，angular.element委托给Angular的内置jQuery子集，称为“jQuery lite”或“jqLite”。

angular.element(document.getElementById('test'));

OR

angular.element(document.querySelector('#test'))

修改

您需要使用$timeout： Angular的window.setTimeout包装器。 fn函数被包装到try / catch块中，并将任何异常委托给$ exceptionHandler服务。

app.controller('mainCtrl', ['$scope', '$timeout', function($scope, $timeout) { $scope.foo = { title: 'Title', template: 'views/myTemplate.html' }; $timeout(function() { console.log(document.getElementById('test')); }, 0); // setTimeout(function() { // console.log(document.getElementById('test')); // }, 0); }]);

Answer 2

您还可以使用jQuery获取元素并对其进行处理。

$("#test").html(); will display "Check" in your case.

Answer 3

使用angularjs，处理jQuery来操作元素是不好的，尤其是在控制器中（这是错误的方式），它应该在指令中进行管理。

但是对于你的问题，你试图在他没有加载（异步调用）时获取元素，所以你应该为这个元素编写一个指令，并在链接函数中，做你想做的任何事情，因为元素将被加载

如何通过角度模板中的ID获取DOM元素？

3 个答案: