指令，如何检测它是否已完全呈现

directives, how to detect if it's fully rendered

本文关键字：是否 何检测 检测 指令      更新时间：2023-09-26

所以我有一个指令：

APP.directive('projectsStrip', function(){
    return {
        restrict: 'E',
        controller: 'ProjectCtrl',
        templateUrl: 'views/projects/projects.strip.html',
        link: function link($scope, elem, attrs) {
            $scope.$on('slides-ready', resizeStrip.bind(null, elem));
        }
    }
});
var resizeStrip = function(elem, ev, data){
    debugger;
};

和模板：

<div id="main" class="site-main">
    <div id="main-content" class="main-content">
        <div ng-repeat="slide in project.slides" class="post type-post status-publish format-standard has-post-thumbnail hentry category-portfolio category-work tag-art tag-minimal tag-modern" style="width: 592px;">
            <img src="{{slide.url}}" alt="{{slide.title}}">
            <label>{{slide.label}}</label>
        <div>
    </div>
</div>
控制器

加载来自另一个控制器的项目：

app.controller('ProjectCtrl', function($scope, $http){
    $scope.project = {};
    $scope.$on('project-selected', function(ev, project){
        $scope.project = project;
        $scope.$root.$broadcast('slides-ready');
    });
});

问题是，在指令中，当函数 resizeStrip 运行时，html 中仍然没有呈现的幻灯片，所以当我运行elem.find('img')时，我得到[].
点击幻灯片（<div ng-repeat="slide in project.slides" ...>）渲染的正确方法是什么？

当你广播slides-ready时，ngRepeat指令仍然不知道project已经改变。更改尚未消化，因此不会呈现任何内容。您可以将广播包装成$timeout呼叫。

但即便如此，您可能也想等到加载图像。如果是这样，则必须将onLoad事件处理程序附加到img元素。只有当所有运行完毕时，您才能调用resizeStrip 。

相关文章：