dom完成渲染后如何运行指令？

我有一个看似简单的问题，没有明显的解决方案（通过阅读Angular JS文档）。

我有一个Angular JS指令，该指令根据其他DOM元素的高度进行一些计算，以定义DOM中容器的高度。

指令内部发生了类似的事情：

return function(scope, element, attrs) {
    $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
}

问题是当指令运行时，$('site-header')找不到它，返回一个空数组而不是我需要的jQuery包装的DOM元素。

我是否可以在指令中使用仅在加载DOM之后才能运行的回调，并且可以通过常规jQuery选择器样式查询访问其他DOM元素？

这取决于$（'site-header'）的构造方式。

您可以尝试使用$ timeout，延迟为0。就像是：

return function(scope, element, attrs) {
    $timeout(function(){
        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
    });        
}

解释其工作方式：一，二。

不要忘记$timeout在指令中注入：

.directive('sticky', function($timeout)

这是我的方法：

app.directive('example', function() {

    return function(scope, element, attrs) {
        angular.element(document).ready(function() {
                //MANIPULATE THE DOM
        });
    };

});

可能作者不再需要我的回答。不过，出于完整性考虑，我觉得其他用户可能会觉得有用。最好和最简单的解决方案是$(window).load()在返回函数的主体内部使用。（或者，您可以使用document.ready。这实际上取决于您是否需要所有图像）。

$timeout以我的拙见，使用它是一个很弱的选择，在某些情况下可能会失败。

这是我要使用的完整代码：

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function($scope, $elem, attrs){

           $(window).load(function() {
               //...JS here...
           });
       }
   }
});

有一个 ngcontentloaded事件，我想你可以使用它

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function(scope, elem, attrs){

                $$window = $ $window


                init = function(){
                    contentHeight = elem.outerHeight()
                    //do the things
                }

                $$window.on('ngcontentloaded',init)

       }
   }
});

如果由于外部资源而无法使用$ timeout，并且由于时间的特定问题而无法使用指令，请使用广播。

加 $scope.$broadcast("variable_name_here");所需的外部资源之后或长时间运行的控制器/指令已经完成。

在外部资源加载完成后，添加以下内容。

$scope.$on("variable_name_here", function(){ 
   // DOM manipulation here
   jQuery('selector').height(); 
}

例如，在承诺延迟的HTTP请求中。

MyHttpService.then(function(data){
   $scope.MyHttpReturnedImage = data.image;
   $scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded", function(){ 
   jQuery('img').height(80).width(80); 
}

我遇到了类似的问题，想在这里分享我的解决方案。

我有以下HTML：

<div data-my-directive>
  <div id='sub' ng-include='includedFile.htm'></div>
</div>

问题：在父div指令的链接功能中，我想对子div＃sub进行jquery。但这给了我一个空的对象，因为当指令的链接功能运行时ng-include尚未完成。因此，首先我用$ timeout进行了一个肮脏的解决，它可以工作，但是延迟参数取决于客户端速度（没人喜欢）。

可行但很脏：

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        $timeout(function() {
            //very dirty cause of client-depending varying delay time 
            $('#sub').css(/*whatever*/);
        }, 350);
    };
    return directive;
}]);

这是干净的解决方案：

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        scope.$on('$includeContentLoaded', function() {
            //just happens in the moment when ng-included finished
            $('#sub').css(/*whatever*/);
        };
    };
    return directive;
}]);

也许对某人有帮助。