Question

我知道在 jQuery 中，我们可以在更改事件中使用$(this)作为示例：

$('#id_element').change(function(){
  $(this).removeClass('unneeded-class');
});

在AngularJS 中，我的指令输入如下：

<input type="text" class="pull-left" placeholder="Name" ng-model="app.name" ng-change="textChanged()">

在编译函数中我有以下内容：

scope.textChanged = function(){
}

我无法使用ng-class删除unneeded类，因为此类是通过单击提交按钮添加的，我需要在用户开始输入他的名字时，我想删除此类

我的指示更明确

app.directive('appointment', function(RecursionHelper){
  return {
    restrict: "E",
    scope: {
        appt: '=ngModel'
    },
    template:
        '<div class="row appointment-inputs">' +
            '<div class="col-md-12">' +
                    '<input type="text" class="pull-left" placeholder="First Name" ng-model="appt.f_name" ng-class="(appt.f_name === undefined || appt.f_name === \'\') ? \'empty\' : \'filled\'" ng-change="textChanged()">' +
                    '<input type="text" class="pull-left" placeholder="Last Name" ng-model="appt.l_name" ng-class="(appt.l_name === undefined || appt.l_name === \'\') ? \'empty\' : \'filled\'" ng-change="textChanged()">' +
                    '<input type="text" class="pull-left app-input" placeholder="Appointment Date" ng-model="appt.date" name="date2" bs-datepicker data-date-format="yyyy-MM-dd" data-date-type="number" ng-class="(appt.date === undefined  || appt.date === \'\') ? \'empty\' : \'filled\'" ng-change="textChanged()">' +
            '</div>' + 
        '</div>',
    compile: function(element) {
        return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn){
        scope.textChanged = function(){
        }
      });
    }
};
});

当用户点击提交按钮时，我为必填字段添加了类调用red-border，没有输入所有必填字段，我希望当用户在任何字段上启动类型时，触发textChanged函数，并删除{ {1}}仅来自当前元素的类。

我的问题： 如何将具有事件的当前元素发送到red-border函数？

Answer 1

你可以为ng-Change做出指示并把你的行为

像

    app.directive('myChange', function() {
  return function(scope, element) {
    element.bind('change', function() {
     element.removeClass('unneeded-class'); // or something else
    });
  };
});

使用

  <input type="text" class="pull-left" placeholder="Name" ng-model="app.name" my-change>

Answer 2

我们可以通过以下方式解决它：

angular.element(iElement[0].querySelector('.question-wrap')).removeClass('red-border');

或者，使用$broadcast，并将$ rootScope注入指令，如下所示：

$rootScope.$on('submitted:change', function () {
  if (!scope.answer) {
      scope.submitted = true;
  };
});

使用以下内容触发此操作：

$rootScope.$broadcast('submitted:change', 'changed');

将当前元素发送到ng-change事件

2 个答案: