Javascript querySelectorAll不'；t与ngInclude、uiView一起工作_Javascript_Angularjs_Angularjs Directive

Javascript querySelectorAll不'；t与ngInclude、uiView一起工作

javascript angularjs

Javascript querySelectorAll不'；t与ngInclude、uiView一起工作,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我想获取元素中的所有元素。为此，我创建了一个指令“查找图像”： app.directive('findImages', function() { return { restrict: 'A', scope: {}, link: function(scope, element, attrs) { var img_elements = element[0].querySelectorAll('img');

我想获取元素中的所有

元素。为此，我创建了一个指令“查找图像”：

app.directive('findImages', function() {
    return {
        restrict: 'A',
        scope: {},
        link: function(scope, element, attrs) {
            var img_elements = element[0].querySelectorAll('img');
            console.log(img_elements) //doesn't have img elements nested inside ngInclude, uiView
        }
    }
})

我在body标签中使用了如下指令：

<body find-images>

但是，我使用的是

ui路由器

，并且在许多地方

ng include

（加载嵌套部分）。我面临的问题是，querySelectorAll没有返回嵌套在
ng include
和
ui视图中的img元素。如何获取嵌套在其中的元素？另外，所有嵌套元素（ui视图，ng include）都在body标记中。问题是，ng include将在指令的链接函数之后包含元素。它将取决于应用程序的结构和您试图实现的目标，但本质上（通过超时、承诺或回调），您需要有一种机制来确定DOM何时处于稳定状态（ng-Include可能有更多ng-Include等，并且可能会变得复杂），然后运行指令逻辑。在UI路由器中触发的状态转换事件中实现逻辑，可以考虑与页面加载相同。 angular.module('app', []) .run(['$document', function ($document) { $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) { var body = $document.getElementsByTagName("body")[0]; var img_elements = element[body].querySelectorAll('img'); } }); 更新另一个选项是在完成渲染时使用ng include引发的onload事件另外，别忘了nginclude本身就是一个指令，您可以在许多实例中使用ngswitch而不是nginclude，而是呈现自定义指令这样，控制器中的逻辑就更少了，视图中呈现的内容就更明显了调用link 函数以查找图像时
ng include just not load content OK，那么我如何等待这些图像加载到指令中？是否存在某种机制？这似乎是一种奇怪的指令用法，可能需要使用服务和调用。正文很可能只呈现一次，因此您的指令将只运行一次。您可以尝试将事件处理程序添加到document ready，或者event@Shaun，一次只运行链接函数，但在内部，OP可以声明类似事件处理程序的东西，甚至可以声明可以运行几次的计时器。是的，我得到了那个部分。现在，我正在弄清楚如何等待，直到所有地方的部分都已加载。没有快速修复方案，这取决于您的业务逻辑，您需要手动将其连接起来（考虑等待异步请求的嵌套模板）。我是在创建一个可在任何地方应用的通用可重用指令。看起来有很多案例需要考虑。谢谢您的输入。这里的元素[0]是什么？很抱歉，我刚刚复制了您的代码。供应更多。这只是一个例子。这将在每次（像您一样）我希望能够选择我必须延迟加载的元素时在主体上运行。它不一定是主体。您将指令放在主体上，所以这没有什么不同，只是不需要所有事件等。您可以使用类名声明是否需要处理它。这就是一个示例。我可以把指令放在我想要的任何地方（我想要实现！）。元素[0]然后引用当前元素，即我要在其中延迟加载的元素。。。