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