Question

所以我有一个指令：

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" ...>）呈现的那一刻，正确的方法是什么？

Answer 1

当您广播slides-ready时，ngRepeat指令仍然不知道project已更改。这种变化还没有被消化，所以没有任何东西被渲染出来。您可以将广播包装成$timeout电话。

但即便如此，您可能还要等到图像加载完毕。如果是这样，那么您必须将onLoad事件处理程序附加到img元素。只有在全部运行后，您才能拨打resizeStrip。

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

1 个答案: