从角度服务访问 ng-include 部分中的 DOM 元素答案

【问题标题】：Access DOM element within ng-include partial from angular service从角度服务访问 ng-include 部分中的 DOM 元素
【发布时间】：2016-10-03 18:44:51
【问题描述】：

splash.html 的标记：

<div id="test"></div>

我在控制器中定义了我的视图：

$scope.splashView = "partials/splash.html";

我的模块看起来像：

angular.module('splash', [])
    .service("splashLoader", ['$document', function ($document) {

        var document = $document[0];
        var adv = document.getElementById('test');
        console.log(adv); // is null

}]);

部分渲染很好，但是当我尝试从服务访问元素时得到一个空值。如何使用 javascript 或使用角度方法访问测试元素？我猜它与范围有关，但我有点迷茫。

谢谢

【问题讨论】：

这在角度上确实是倒退……数据模型应该规定 dom 中可用的内容，并且在加载控制器或模板之前运行服务
你建议我把这个逻辑放在哪里？
你想做什么？如果您还需要操作 dom....您将使用指令，指令中的任何代码都只会在元素存在时运行
您在使用路由器吗？...这是分割视图的最简单方法
好的..没关系...可以使用动态 ng-include 如果这也是您所需要的。但是您的数据模型将确定呈现的内容，您可以使用指令来操作 dom

标签： angularjs

【解决方案1】：

我的错误是在 DOM 中没有准备好就尝试访问该元素。我一定会应用@charlietfl 提供的技巧，尤其是使用指令进行额外的 DOM 操作。

下面的这个答案描述了几种确保 ng-include 已加载的技术。

Finished Loading of ng-include in angular js

【讨论】：