将jquery事件/函数注入angularjs

Question

我现在有这个代码块：

$('.btn').click(function() {
   $(this).removeClass('big-red-button');
   $(this).addClass('btn-loading');
   $(this).find('.text').text('Working..');
   $(this).find('.state').addClass('loading');
   $(this).find('i').replaceWith('<img src="/images/loading.gif">'+'</img>');

})；

它所做的是，当点击指定的按钮时，它会更改按钮CSS，禁用它，并将文本设置为"Working…"。这是为了让用户知道一个操作正在执行，我知道还有其他方法可以做到这一点，但我更喜欢这种方式。我现在的问题是，我正在使用angularjs，我必须点击执行函数的按钮，现在在该函数启动之前，我需要执行上面的jquery代码，当函数完成时，我想执行类似的jquery代码来再次更改按钮属性。

这是我的ng点击功能（）：

$scope.addTicket = function(ticket, schedule_id) {
    // Set button into working state        
    // Do stuff here
    // Set button into completed state
};

现在，如果我单独使用jquery，我可以做到这一点，但现在我不知道如何使我的jquery代码与angular一起工作。

Answer 1

您的指令如下所示，然后我们将删除ng-click方法。

标记

<button my-directive add-ticket="addTicket()"></button>

指令

app.directive('myDirective', function() {
    restrict: 'E',
    link: function(scope, element, attrs) {
        element.on('click', function() {
            element.removeClass('big-red-button');
            element.addClass('btn-loading');
            element.find('.text').text('Working..');
            element.find('.state').addClass('loading');
            element.find('i').replaceWith('<img src="/images/loading.gif">' + '</img>');
            scope.$apply(attrs.addTicket);
        });
    }
});