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

时间:2022-01-29 14:23:53

I know in jQuery we can use $(this) in change event as example:

我知道在jQuery中我们可以使用$(this)在change event作为例子:

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

In AngularJS, I have directive that has input as the following:

在AngularJS中,我有如下输入指令:

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

and in compile function I have the following:

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

scope.textChanged = function(){
}

I can't use ng-class to remove unneeded class, because this class was added by clicking on submit button, and I need when user start to type his name, I want to remove this class.

我不能使用ng-class来删除不需要的类,因为这个类是通过单击submit按钮添加的,我需要当用户开始输入他的名字时,我想删除这个类。

My Directive to be more clear

我的指示要更明确

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

And I add class call red-border for mandatory fields when user click on submit button, without type all mandatory field, I want when user start type on any field, fired textChanged function, and remove red-border class from current element only.

当用户单击submit按钮时,我添加了类调用red-border,当用户点击submit按钮时,没有键入所有的必填项,当用户开始键入任何字段时,我想要触发textChanged函数,并且只从当前元素删除红边类。

My Question: How can I send the current element that has event to textChanged function ?

我的问题是:如何将具有事件的当前元素发送到textChanged函数?

2 个解决方案

#1


2  

you can make a directive for ng-Change and put your doings

你可以为ng-Change做一个指示,并把你的行为

like

就像

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

usage

使用

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

#2


0  

We can solve it by use the following:

我们可以用以下方法来解决:

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

Or, using $broadcast, and inject $rootScope to directive as the following:

或者,使用$broadcast并向directive注入$rootScope如下所示:

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

And fire this action using the following:

并使用以下方法启动此操作:

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

#1


2  

you can make a directive for ng-Change and put your doings

你可以为ng-Change做一个指示,并把你的行为

like

就像

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

usage

使用

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

#2


0  

We can solve it by use the following:

我们可以用以下方法来解决:

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

Or, using $broadcast, and inject $rootScope to directive as the following:

或者,使用$broadcast并向directive注入$rootScope如下所示:

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

And fire this action using the following:

并使用以下方法启动此操作:

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