Как зарегистрировать событие click в директиве в angularjs

Question

Im new in angularjs. У меня есть div #single, я хочу изменить цвет фона, а затем хочу, чтобы сервер back-end вызывал событие click. Я не знаю, как это делается в пользовательской директиве angularjs. любая помощь будет оценена б моего HTML код

<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 является директивой, имеет следующий код. пожалуйста, помогите мне, как это сделать

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

Вы должны использовать element.bind вместо element.on. Доступ к целевому элементу возможен через цель события или просто это.

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 
    } 
});