如何在angularjs的指令中注册点击事件

Question

Im new in angularjs. I have a div #single I want to change the background color and then want to call back-end server on the click event. I dont know how to this in angularjs custom directive . any help will b appreciated my html code

 <div id="single" class="" ng-style="{'background':x.is_read == 0 ?
 'rgba(98, 95, 95, 0.87)': '#A4A4A4'}"  ng-repeat="x in notification"  chang-color>

changColor is directive that have following code . please help me how to do this

 var app = angular.module('smac', []);
 app.controller('asd',function ($http,$scope) { 

 app.directive("changColor", function() {

 return {
        restrict: 'A',
         scope: {},
         link: link
    };
        function link (scope, element) {
        element.on('click', onClick);
    }

    function onClick () {
        alert('as');
        $(this).css({ 'background': '#A4A4A4' });
   // after this back end call 
    }



    });
  });

Answer 1

You should use element.bind instead of element.on . Target element can be accessed via event target or simply this.

var app = angular.module('smac', []);

app.controller('asd',function ($http,$scope) {  
  // this is controller body
});

app.directive("changColor", function() {
  return {
    restrict: 'A',
     scope: {},
     link: link
  };

  function link(scope, element) {
    element.bind('click', onClick);
  }

  function onClick (e) {
    alert('as');
    // Following lines as equal
    e.target.style.background = "#A4A4A4"; 
    this.style.background = "#A4A4A4"; 
    angular.element(this).css("background","#A4A4A4");
    // after this back end call 
  }
});