Question

我想在ng-repeat完成后调用该指令。我使用两个同名的控制器。我的问题是，当我调用控制器的功能时，该函数会更改列表的值。并且基于该列表ng-repeat是有效的。当ng-repeat是调用end指令时调用END函数。但是ng-repeat和指令一样不能正常工作。

我的HTML代码在这里

> <body ng-app="modules"   >
    <div class="container" >
        <div class="row"  ng-controller="mainctl">
            <div class="col-sm-1">
                <a href="#" ng-click="divide(1)" ><h3>1*1</h3></a>
            </div>
            <div class="col-sm-1">
                <a href="#"  ng-click="divide(2)"><h3>2*2</h3></a>
            </div> 
            <div class="col-sm-1">
                <a href="#"  ng-click="divide(3)"><h3>3*3</h3></a>
            </div>  
            <div class="col-sm-1">
                <a href="#"  ng-click="divide(4)"><h3>4*4</h3></a>
            </div> 
            <div/>
            <div ng-controller="mainctl">
                <div ng-repeat="rows in cells" > <!-- repeat fot rows -->
                    <div class="row">
                        <div ng-repeat="cols in cells" repeat-end="onEnd()"> <!-- repeat for colums -->
                            <div  id="Div_{{rows}}{{cols}}" class="col-sm-2 rcorners2">
                                <center><h1>{{rows}}{{cols}}</h1></center>

                                <div id="divPictureBoxPlayback{{rows}}{{cols}}" class="pictureboxPlayback'"
                             ad-drop="true"
                             ad-drop-end="onDrop($data, $dragElement, $dropElement, $event);" >
                                     <div id="divHeaderPictureBoxPlayback{{rows}}{{cols}}" class="panel panel-default margin-b-0 text-center pictureboxHeader row" 
                                 ng-hide="StartPlayerPlayback{{rows}}{{cols}}" >
                                     <div class="">
                                            <span class="col-lg-3 col-xs-3 col-md-3 text-left">{{cameraNamePlayback00}}</span>
                                            <span class="col-lg-9 col-xs-9 col-md-9 text-right pad-0">
                                                <button class="margin-r-10 btn btn-xs" ng-click="StopStreaming('{{rows}}{{cols}}')"><i class="fa fa-close"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                    <div id="divStreamingAreaPlayback{{rows}}{{cols}}" class="video-cointainer text-center row" ng-hide="StartPlayerPlayback{{rows}}{{cols}}"></div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
</body>

这是我的控制器

app.controller('mainctl', function ($scope,$timeout) {
 $scope.cells =["0"];
    //Scopes.store('mainctl', $scope);
   $scope.divide = function (ar)
    {
        $scope.value = ar;
       $scope.cells = [];
        for (var i = 0; i < ar; i++)
        {
            $scope.cells.push(i + "");

        }   
    }
     $scope.divide1=function()
     {
        for(var i=0;i<$scope.value;i++)
        {
            for(var j=0;j<$scope.value ;j++)
            {
                    $scope.index=""+i+j;
                    $("#divPictureBoxPlayback" + $scope.index).attr('class', 'picturebox  pictureboxPlayback' + i + j);
                    $("#divPictureBoxPlayback" + index).show();
            }
        }
     }

      $scope.onEnd = function(){
                $timeout(function(){
                    alert('all done');
                    $scope.divide1();
           }, 1);
    }


});

这是我的指示

 app.directive("repeatEnd", function($timeout){
            return {
                restrict: "A",
                link: function (scope, element, attrs) {
                    if (scope.$last) {
                    alert("last element ");
                        scope.$eval(attrs.repeatEnd);
                    }
                }
            };
        })

Answer 1

好像你错过了超时。您需要在指令代码中超时：

 app.directive("repeatEnd", function ($timeout) {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                if (scope.$last) {
                   $timeout(function () {
                      alert("last element ");
                      scope.$eval(attrs.repeatEnd);
                   });

                }
            }
        };
    })

$timeout将确保仅在ng-repeat完成渲染时执行。使用$timeout而不是setTimeout的原因是因为它将在内部调用$apply。

当ng-repeat完成时，不调用指令

1 个答案: