Question

我想获取元素中的所有<img>元素。为此，我创建了一个指令＆＃39; find-images＆＃39;：

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-router并在许多地方ng-include（加载嵌套的部分）。我面临的问题是 querySelectorAll不会返回嵌套在ng-include和ui-view 中的img元素。我怎样才能获得嵌套在其中的元素？此外，所有嵌套元素（ui-view，ng-include）都在body标记内。

Answer 1

问题是，ng-include将包含指令链接功能之后的元素。它取决于您的应用程序的结构以及您尝试实现的目标，但实际上（通过超时，承诺或回调），您需要有一种机制来确定您的DOM何时处于稳定状态（ ng-includes可能有更多的ng-includes等，它可能会变得复杂），然后在那之后运行你的指令逻辑。

Answer 2

在ui-router中触发的statechangesuccess事件中实现逻辑，您可以将其视为与页面加载相同。

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，而是渲染自定义指令。

通过这种方式，您的控制器中的逻辑更少，并且在视图中更明显的是什么时候呈现。

querySelectorAll不能与ngInclude，uiView一起使用

2 个答案: