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-click功能（）：

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

将jquery事件/函数注入angularjs

1 个答案: