AngularJS获取getElementById()不起作用及HTML与controller加载顺序问题

最新推荐文章于 2024-01-29 18:57:22 发布

ywltoread

最新推荐文章于 2024-01-29 18:57:22 发布

阅读量3.4k

点赞数

分类专栏： AngularJS 文章标签： AngularJS getElementById()

本文链接：https://blog.csdn.net/ywl570717586/article/details/79295687

版权

AngularJS 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了AngularJS项目中富文本插件加载失败的问题，详细介绍了使用$timeout延时处理和通过directive监听两种解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS项目需要引入富文本插件，富文本插件需要获取HTMLdom的id进行富文本插件初始化，所以最开始采用getElementById()方法想要获取id，但是console报出获取不到id，写法如下：

define(["app", "wangEditor"], function (app, E) {
    app.controller("savingEdit", ["$scope", "$rootScope",'$timeout',
        function ($scope, $rootScope,$timeout) {
            //富文本编辑器，引入wangEditor组建，并初始化
            var editeditor;
            $scope.myEditorClick = function () {
                //初始化E
                editeditor = new E(document.getElementById("myEditEditor"));
                //渲染富文本编辑器
                editeditor.create();
            }
            $scope.myEditorClick();
        }
    ]);
});

<div id="myEditEditor"></div>

上面这种写法会报myEditEditor为空id。

经过分析，我推测是因为AngularJS在加载controller时，对应的HTML文件并没有加载完成，他们可能是同时加载的。在网上搜索了很多办法，最后我总结出如下两种办法实现id的正常获取：

1.$timeout延时处理

这个办法显而易见，既然直接加载获取不到，那就价格延时，等html加载了在执行js渲染。代码如下：

define(["app", "wangEditor"], function (app, E) {
    app.controller("savingEdit", ["$scope", "$rootScope",'$timeout',
        function ($scope, $rootScope,$timeout) {
            //富文本编辑器，引入wangEditor组建，并初始化
            var editeditor;
            $scope.myEditorClick = function () {
                //初始化E
                editeditor = new E(document.getElementById("myEditEditor"));
                //渲染富文本编辑器
                editeditor.create();
            }
            $timeout(function () {
                $scope.myEditorClick();
            },300);
        }
    ]);
});

<div id="myEditEditor"></div>

2.通过directive监听html文本是否渲染完成

大家一般是监听ng-repeat是否渲染完最后一条来监听，你也可以监听其他html是否渲染完成。以ng-repeat为例，代码如下：

app.directive('repeatFinish',function(){
    return {
        link: function(scope,element,attr){
            console.log(scope.$index)
            if(scope.$last == true){
                scope.$eval( attr.repeatFinish )
            }
        }
    }
})

<div id="box">
    <span ng-repeat="item in data" repeat-finish="renderFinish()">{{item.str}}</span>
</div>