Question

我正在使用owl carousel，其数据来自ajax调用。在ajax ng-repeat之后填充html内容。

所以我想解雇制作猫头鹰旋转木马的指令，完成所有操作后。怎么做。

我可以想到使用onFinishedRender指令的一种方法，但这不起作用。

指令：

directives.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                    if(!!attr.onFinishRender){
                      $parse(attr.onFinishRender);
                    }
                });
            }
        }
    }
}]);

控制器： -

pastWorkService.getAllPastWork()
    .success(function(data) {

        var len = data.length;
        $scope.pastWorkData1 = data.slice(0, len/2);
        $scope.pastWorkData2 = data.slice(len/2, len - 1);
        $scope.owlCarouselPastWork1 = function(){
            $('.owl-carousel2').owlCarousel({
                items: 4,
                loop:true,
                slideSpeed : 1000,
                autoPlay: 3000,
                itemsDesktop: [1199, 4],
                itemsDesktopSmall: [980, 3],
                itemsTablet: [768, 3],
                itemsTabletSmall: false,
                itemsMobile: [479, 1],
                navigation: false
            });
        };
        $scope.owlCarouselPastWork = function(){
            $('.owl-carousel1').owlCarousel({
                items: 4,
                loop:true,
                slideSpeed : 1000,
                autoPlay: 3000,
                itemsDesktop: [1199, 4],
                itemsDesktopSmall: [980, 3],
                itemsTablet: [768, 3],
                itemsTabletSmall: false,
                itemsMobile: [479, 1],
                navigation: false
            });
        };
    });

HTML： -

<div class="owl-carousel1" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData1" on-finish-render="owlCarouselPastWork1()">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
    </div>
</div>
<!-- second row goes here as owl carousel can contain 1 row -->
<div class="owl-carousel2" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData2" on-finish-render="owlCarouselPastWork1()">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
    </div>
</div>

Answer 1

由于您只想在渲染最后一个重复项目后调用一个函数，因此可以使用以下方法：

<强> HTML

<div class="owl-carousel1" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData1">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
        <span ng-if="$last" on-finish-render function-to-call="owlCarouselPastWork()"></span>
    </div>
</div>
<!-- second row goes here as owl carousel can contain 1 row -->
<div class="owl-carousel2" role="listbox" >
    <div class="item" ng-repeat="p in pastWorkData2">
        <img src="{{p.mainImage}}" alt="completed-projects" />
        <div class="panel-footer">{{p.apartmentName}}</div>
        <span ng-if="$last" on-finish-render function-to-call="owlCarouselPastWork1()"></span>
    </div>
</div>

<强>指令

.directive('onFinishRender', function($timeout) {
    return {
        restrict: 'A',
        scope: {
            functionToCall: '&'
        },
        link: function(scope, elem, attrs) {
            $timeout(function() {
                scope.functionToCall();
            });
        }
    }
})

Here is an extremely simple and contrived example来说明这个想法。您甚至可以重做这个以在指令中使用该函数，您只需传递要调用它的类标识符。

ng-repeat完成后的fire指令

1 个答案: