ng-repeat finish event

前端 未结 15 2621
盖世英雄少女心
盖世英雄少女心 2020-11-22 02:15

I want to call some jQuery function targeting div with table. That table is populated with ng-repeat.

When I call it on

$(document).r         


        
相关标签:
15条回答
  • 2020-11-22 03:00

    Indeed, you should use directives, and there is no event tied to the end of a ng-Repeat loop (as each element is constructed individually, and has it's own event). But a) using directives might be all you need and b) there are a few ng-Repeat specific properties you can use to make your "on ngRepeat finished" event.

    Specifically, if all you want is to style/add events to the whole of the table, you can do so using in a directive that encompasses all the ngRepeat elements. On the other hand, if you want to address each element specifically, you can use a directive within the ngRepeat, and it will act on each element, after it is created.

    Then, there are the $index, $first, $middle and $last properties you can use to trigger events. So for this HTML:

    <div ng-controller="Ctrl" my-main-directive>
      <div ng-repeat="thing in things" my-repeat-directive>
        thing {{thing}}
      </div>
    </div>
    

    You can use directives like so:

    angular.module('myApp', [])
    .directive('myRepeatDirective', function() {
      return function(scope, element, attrs) {
        angular.element(element).css('color','blue');
        if (scope.$last){
          window.alert("im the last!");
        }
      };
    })
    .directive('myMainDirective', function() {
      return function(scope, element, attrs) {
        angular.element(element).css('border','5px solid red');
      };
    });
    

    See it in action in this Plunker. Hope it helps!

    0 讨论(0)
  • 2020-11-22 03:00

    I did it this way.

    Create the directive

    function finRepeat() {
        return function(scope, element, attrs) {
            if (scope.$last){
                // Here is where already executes the jquery
                $(document).ready(function(){
                    $('.materialboxed').materialbox();
                    $('.tooltipped').tooltip({delay: 50});
                });
            }
        }
    }
    
    angular
        .module("app")
        .directive("finRepeat", finRepeat);
    

    After you add it on the label where this ng-repeat

    <ul>
        <li ng-repeat="(key, value) in data" fin-repeat> {{ value }} </li>
    </ul>
    

    And ready with that will be run at the end of the ng-repeat.

    0 讨论(0)
  • 2020-11-22 03:00

    I found an answer here well practiced, but it was still necessary to add a delay

    Create the following directive:

    angular.module('MyApp').directive('emitLastRepeaterElement', function() {
    return function(scope) {
        if (scope.$last){
            scope.$emit('LastRepeaterElement');
        }
    }; });
    

    Add it to your repeater as an attribute, like this:

    <div ng-repeat="item in items" emit-last-repeater-element></div>
    

    According to Radu,:

    $scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {mycode});
    

    For me it works, but I still need to add a setTimeout

    $scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {
    setTimeout(function() { 
        mycode
    }, 100); });
    
    0 讨论(0)
提交回复
热议问题