Angular ng-repeat traversal after rendering the page to perform other operations detailed introduction _angularjs

Angular ng-repeat Traversal rendering

In the business sometimes need to get the data asynchronously and ng-repeat traversal rendering finished after the page to perform an operation, angular itself does not provide listening to ng-repeat rendering complete instructions, so need to write their own. Experienced students should know that some special properties are exposed within the Ng-repeat template instance $index/$first/$middle/$last/$odd/$even, $index will increment with each traversal (starting from 0), and when traversing to the last one, $ Last value is True,so, by judging $last's value to monitor ng-repeat execution state, how to get $last value in traversal process: custom instruction

Small example, I only wrote the most important part

The data to be cycled
$scope. Date = [
  {
    str: ' A '
  },
  {
    str: ' B '
  },
  {
    str: ' C '
  }
]

Custom directive Repeatfinish
app.directive (' Repeatfinish ', function () {return
  {
    link:function (scope, element,attr) {
      console.log (scope. $index)
      if (scope. $last = = True) {
        console.log (' ng-repeat execution completed ')
      }
    }
  }
})
<div id= "box" >
  <span ng-repeat= "item in Data" Repeat-finish>{{item.str}}</span>
</ Div>

Open the console, will print out the 0,1,2, when $index = 2 points, $last value for true,ng-repeat rendering finished

So easy!

Of course the instructions are best to be reused, in this instruction to write specific business logic is not conducive to reuse, you can give instructions to specify a processing function renderfinish

<div id= "box" >
  <span ng-repeat= "item in Data" Repeat-finish= "Renderfinish ()" >{{item.str}}</span >
</div>

And get this handler function by the attr parameter of the instruction.

App.directive (' Repeatfinish ', function () {return
  {
    link:function (scope,element,attr) {
      Console.log ( Scope. $index)
      if (scope. $last = = True) {
        console.log (' ng-repeat execution completed ')
        scope. $eval (Attr.repeatfinish)
      }
    }
  }
})
The corresponding handler function in controller
$scope. renderfinish = function () {
  Console.log (operations after render)
}

Attr gets a property that is just a string expression, $scope. $eval method is a specialized execution of a ANGULARJS expression that handles functions so that the instructions are used in different places and can pass different processing functions.

Some of the business is more complex, may be ng-repeat after rendering completed, need to perform multiple operations and the multiple operations have multiple front-end completion, need to use the angular event, in the repeatfinish command of the link function to trigger an event, Listen to this event and complete their actions.

App.directive (' Repeatfinish ', function () {return
  {
    link:function (scope,element,attr) {
      Console.log ( Scope. $index)
      if (scope. $last = = True) {
        console.log (' ng-repeat completed ')
        //Pass event scope to the parent controller
        . $emit (' To-parent ');
        Passing event scope to a child controller
        $broadcast (' To-child ');}}}
)
Listener events in the parent controller
$scope. $on (' To-parent ', function () {
  //Parent Controller performs action
})

//Child controller listening for event
$scope. $on (' To-child ', function () {
  //Sub Controller performs action
})

How do I listen to the event under the current controller? Angular there is no way to pass events to the current controller, you can pass events to the parent (child) controller first, and the parent (child) controller will relay events to the child (parent) controller after hearing the event.

A word Summary: instruction is one of the core functions of angular, with a good effort, monitoring ng-repeat execution state is only the tip of its function

Thank you for reading, I hope to help you, thank you for your support for this site!