Angular Ngclick prevents bubbles from using default behavior _angularjs

The example in this article describes how angular ngclick prevents bubbling from using default behavior. Share to everyone for your reference, specific as follows:

This is actually a very simple question, and if you have taken a serious look at angular's official API documentation, you don't want to record it. But this question has been asked more than once, so it's recorded here today.

In angular there have been some NG events such as Ngclick,ngblur,ngcopy,ngcut,ngdblclick ... A variable called $event is added to the

As Ngclick is described in the official document:

Expression to evaluate upon click. (Event object is available as $event)

After viewing the angular code ngeventdirs.js:

var ngeventdirectives = {};
ForEach (
   ' click DblClick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress s Ubmit focus Blur copy cut Paste '. Split ('),
   function (name) {
    var directivename = directivenormalize (' ng-' + name) ;
    Ngeventdirectives[directivename] = [' $parse ', function ($parse) {return
     {
      compile:function ($element, attr) { C8/>VAR fn = $parse (Attr[directivename]);
       return function (scope, element, attr) {
        element.on (lowercase (name), function (event) {
         scope. $apply ( function () {
          fn (scope, {$event: event});
         });
        };
   };}}
;

In the top code we can get two messages:

①. Angular supported Event:click DblClick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup KEYP Ress submit focus blur copy cut paste

②. Angular passed a constant named $event when executing an event function that represents the current event object, and if you introduced jquery before angular, then this is the event of jquery.

So we can use the stoppropagation of event to block the bubbling of events: the following code: Jsbin

HTML code:

<! DOCTYPE html>
 
 

JS Code:

Angular.module ("App", [])
. Controller ("demo", [function () {
 var vm = this;
 Vm.click = function (name, $event) {
  Console.log (name + "-----called");
  if (vm.stoppropagation) {
   $event. stoppropagation ();
  }
 };
 return VM;
}];

You can view the effect in Jsbin.

First open your console, and then click on the button without selecting the stop propagation you will see two log records, but only the button log information will appear when selected.

I hope this article will help you to Angularjs program design.