AngularJS implements the method of binding events to dynamically generated elements

The example in this article describes how AngularJS implements binding events to dynamically generated elements. Share it with everyone for your reference, the details are as follows:

1. We know that in jQuery, an element is dynamically generated. If you want to dynamically bind events while dynamically generating the element, you can use the live/on method (in jquery3.0 The bind method has been abolished).

2. In AngularJS, operating DOM is generally completed in instructions. The event listening mechanism is to bind events to the statically generated DOM. If DOM nodes are dynamically generated in instructions, the dynamically generated nodes will not be used by JS. Event monitoring.

For example:

angular.module('myapp',[])
.directive('myText',function(){
  return{
    restrict:'A',
    template:'<p ng-click="hello()">Hi everyone</p>',
    link:function(scope,ele,attr){
    }
  }
})

In this command, a new DOM node will be generated:

<p ng-click="hello()">Hi everyone</p>

But if no processing is done, the ng-click event here cannot be implemented, because the event monitoring has already been done when the static html page is generated. Finish. So how to bind events to dynamically generated elements and implement dynamic monitoring of events?

3. Use the $compile service to compile the DOM to achieve dynamic event binding

var template:'<p ng-click="hello()">Hi everyone</p>',
var content = $compile(template)(scope);

Through these two sentences, first compile the DOM, and then use the compiled DOM to add it to the previous static node to achieve dynamic binding. Certain events, etc. should be injected into $compile service

.directive('myText',function($compile){})

The complete code is as follows:

angular.module('myapp',[])
.directive('myText',function($compile){
  var template:'<p ng-click="hello()">Hi everyone</p>',
  return{
    restrict:'A',
    link:function(scope,ele,attr){
       ele.on("click", function() {
        scope.$apply(function() {
          var content = $compile(template)(scope);
          element.append(content);
        })
      });
    }
  }
})

I hope this article will be helpful to everyone in AngularJS programming.

For more related articles on how AngularJS implements binding events to dynamically generated elements, please pay attention to the PHP Chinese website!

Related articles:

AngularJS implements the method of dynamic compilation and adding to dom

AngularJS dynamically generates the ID of the div

AngularJs dynamically loads modules and dependencies