Angular ng-repeat traversal and rendering page details

Angular ng-repeat traversal rendering

In the business, sometimes it is necessary to perform an operation after asynchronously obtaining data and traversing the rendering page with ng-repeat. Angular itself does not provide instructions to listen for the rendering of ng-repeat, so it needs to be written by yourself. Experienced students should know that some special attributes $index/$first/$middle/$last/$odd/$even will be exposed inside the ng-repeat template instance. $index will increase with each traversal (starting from 0). When traversal to the last one, the value of $last is true, so. By judging the value of $last, you can listen to the execution status of ng-repeat. How to get the value of $last during the traversal: Custom instruction

I only wrote the most important part

//The data to be looped$ = [
  {
    str: 'a'
  },
  {
    str: 'b'
  },
  {
    str: 'c'
  }
]

//Custom directive repeatFinish('repeatFinish',function(){
  return {
    link: function(scope,element,attr){
      (scope.$index)
      if(scope.$last == true){
        ('ng-repeat execution completed')
      }
    }
  }
})
<div >
  <span ng-repeat="item in data" repeat-finish>{{}}</span>
</div>

Open the console and 0, 1, 2 will be printed. When $index = 2 points, the $last value is true, and ng-repeat rendering is completed.

so easy!

Of course, the instructions are best reusable. Writing specific business logic in this instruction is not conducive to reusing. You can specify a processing function renderFinish to the instruction

<div >
  <span ng-repeat="item in data" repeat-finish＝"renderFinish()">{{}}</span>
</div>

Then obtain this processing function through the attr parameter of the instruction

('repeatFinish',function(){
  return {
    link: function(scope,element,attr){
      (scope.$index)
      if(scope.$last == true){
        ('ng-repeat execution completed')
        scope.$eval(  )
      }
    }
  }
})
//The corresponding processing function in the controller$ = function(){
  ('Action after rendering')
}

The attribute obtained by attr is just a string expression. The $scope.$eval method is specially used to execute AngularJS expressions, and the processing functions can be executed. In this way, the instructions can be used in different places and can pass different processing functions.

Some businesses are relatively complex. After the ng-repeat rendering is completed, multiple operations need to be performed and multiple front-ends are completed. An angular event is required. An event is triggered in the link function of the repeatFinish instruction. The front-end students listen to the event to complete their respective operations.

('repeatFinish',function(){
  return {
    link: function(scope,element,attr){
      (scope.$index)
      if(scope.$last == true){
        ('ng-repeat execution completed')
        //Pass events to the parent controller        scope.$emit('to-parent');
        //Pass events to the subcontroller        scope.$broadcast('to-child');
      }
    }
  }
})
// Listen to events in the parent controller$scope.$on('to-parent',function(){
  //The parent controller performs the operation})

//Supervising events in the subcontroller$scope.$on('to-child',function(){
  //The subcontroller performs the operation})

How to listen to this event under the current controller? angular does not have a way to pass events to the current controller. It can first pass events to the parent (child) controller. After listening to the event, the parent (child) controller in turn passes events to the child (parent) controller.

Summary of one sentence: Instructions are one of the core functions of angular. If you use them well, you will get twice the result with half the effort. Listening to the execution status of ng-repeat is only the tip of its function.

Thank you for reading, I hope it can help you. Thank you for your support for this site!