将模型绑定到文本框后调用事件 - Angular
Call a event after binding model to textbox - Angular
我想为我的应用程序中的每个文本框(输入)实现类似 binding-completed
的事件。
这里我试图在 onblur
事件的某些条件下添加 CSS class。没关系。但是我不想在将一些模型绑定到文本框后执行相同的功能。
var app = angular.module("main", []);
var MainController = function($scope, $http) {
$scope.message = "CSS Change";
};
app.directive('floatBox', ['$document', '$timeout', '$rootScope', function($document, $timeout, $rootScope) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attr) {
//this is not for validation, this is just a sample for what I want to do.
//Please don't suggest Angular validations.
element.on('blur', function(event) {
changeCSSClass(element);
});
function changeCSSClass(element) {
if (element.val().length == 0) {
element.addClass('red');
element.removeClass('green');
} else {
element.addClass('green');
element.removeClass('red');
}
}
}
};
}]);
HTML:
<div ng-controller="MainController">
<input float-box type="text" ng-model="message">
</div>
CSS:
.red {
border: 5px solid red;
}
.green {
border: 5px solid green;
}
我想在我的文本框收到一些值后调用 changeCSSClass
。
请使用插件进行快速编辑:http://plnkr.co/edit/NTjcV4KDHRVZasoCJz6l?p=preview
基础问题:
当我从文本框中输入 blur
时,事件正常。但是我想在初始加载本身中显示颜色,即在将模态 message
绑定到文本框之后。这样我就可以得到文本框的长度,并基于它可以设置 css class
我不想在所有文本框中使用 ng-class 并使用范围,而是需要一个通用的实现。
您可以将数据绑定到您的指令,并使用 $watch
:
指令
(function(){
function directive(){
return {
restrict: 'A',
link: function(scope, element, attr) {
//this is not for validation, this is just a sample for what I want to do.
//Please don't suggest Angular validations
scope.$watch(attr.ngModel, function(){
changeCSSClass(element);
});
function changeCSSClass(data) {
if (data.length == 0) {
element.addClass('red');
element.removeClass('green');
} else {
element.addClass('green');
element.removeClass('red');
}
}
}
};
};
angular
.module('app')
.directive('floatBox', directive);
})();
HTML
<input float-box type="text" ng-model="message">
我想为我的应用程序中的每个文本框(输入)实现类似 binding-completed
的事件。
这里我试图在 onblur
事件的某些条件下添加 CSS class。没关系。但是我不想在将一些模型绑定到文本框后执行相同的功能。
var app = angular.module("main", []);
var MainController = function($scope, $http) {
$scope.message = "CSS Change";
};
app.directive('floatBox', ['$document', '$timeout', '$rootScope', function($document, $timeout, $rootScope) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attr) {
//this is not for validation, this is just a sample for what I want to do.
//Please don't suggest Angular validations.
element.on('blur', function(event) {
changeCSSClass(element);
});
function changeCSSClass(element) {
if (element.val().length == 0) {
element.addClass('red');
element.removeClass('green');
} else {
element.addClass('green');
element.removeClass('red');
}
}
}
};
}]);
HTML:
<div ng-controller="MainController">
<input float-box type="text" ng-model="message">
</div>
CSS:
.red {
border: 5px solid red;
}
.green {
border: 5px solid green;
}
我想在我的文本框收到一些值后调用 changeCSSClass
。
请使用插件进行快速编辑:http://plnkr.co/edit/NTjcV4KDHRVZasoCJz6l?p=preview
基础问题:
当我从文本框中输入 blur
时,事件正常。但是我想在初始加载本身中显示颜色,即在将模态 message
绑定到文本框之后。这样我就可以得到文本框的长度,并基于它可以设置 css class
我不想在所有文本框中使用 ng-class 并使用范围,而是需要一个通用的实现。
您可以将数据绑定到您的指令,并使用 $watch
:
指令
(function(){
function directive(){
return {
restrict: 'A',
link: function(scope, element, attr) {
//this is not for validation, this is just a sample for what I want to do.
//Please don't suggest Angular validations
scope.$watch(attr.ngModel, function(){
changeCSSClass(element);
});
function changeCSSClass(data) {
if (data.length == 0) {
element.addClass('red');
element.removeClass('green');
} else {
element.addClass('green');
element.removeClass('red');
}
}
}
};
};
angular
.module('app')
.directive('floatBox', directive);
})();
HTML
<input float-box type="text" ng-model="message">