猿问

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元素?


扬帆大鱼
浏览 726回答 3
3回答

海绵宝宝撒

这是我的方法: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...           });       }   }});
随时随地看视频慕课网APP
我要回答