I would like to set the cursor focus on an input field as soon as the form (directive) is shown. I tried adding the following code to my link function:
link: function (scope, element, attrs) {
element('input[name=headline]').focus();
}
But it does not work. I also tried the following variants:
element.find('input[name=headline]').focus();
element.querySelector('input[name=headline]').focus();
I did not find any useful information on the Web. md-autofocus seems to have nothing to do with what I am trying to achieve.
Option 1
HTML autofocus
Option 2
Try playing with ng-focus from angular.
Update
My bad, ng-focus, from the doc:
Specify custom behavior on focus event.
So ng-focus is not what you need to use. keep on autofocus.
Final solution with ng-if
https://plnkr.co/edit/sb29aGHGtdFQ7fiLdbtN?p=preview
Create a directive that will apply the focus for you.
myApp.directive('yourAutofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function($scope, $element) {
$element[0].focus();
}
}
}]);
Try like this
ng-if="showMe" ng-focus="true && showMe" or ng-focus="focudMe=true; showMe=true"
Related
I'm using jqxgrid inside angular form. When you change something in grid, an angular form does not become dirty. I decided to bind to grid cellvaluechaned event in
which I call $setDirty() for my angular form. It works. But I do not want in each place where form is used to call $setDirty(). Could you please tell me how can I find the
closest form in DOM tree and make it dirty? I want to write this code one time and want that it works for each form where there is a grid inside these forms. Thanks guys.
You can create a directive that will loop over all the necessary html elements under it and add the relevant events.
Here's a template to get you started:
angular.module("app", []).directive("changeform", function() {
var directive = {
restrict: 'A',
require: 'form',
link: function(scope, element, attrs, ctrl) {
// here you would use element.find() to get the elements
// and then use .on() on the elements with the event
// and then use the ctrl (which is of type FormController)
// to set $dirty [https://docs.angularjs.org/api/ng/type/form.FormController]
}
}
})
and then the HTML should look like:
<form name="myForm" changeform> ... </form>
https://docs.angularjs.org/api/ng/type/form.FormController
My directive looks as follows:
directive('setAttribute', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function ($scope, element, attrs, ctrl) {
var prop = $scope.$eval(attrs.setAttribute);
prop.validationRulesToApply.forEach(function (rule) {
attrs.$set(rule.name, rule.val);
});
}
}
});
As you can this one is for setting attributes dynamically. In spite of attributes are set properly(i can see them in final HTML) no validation is triggered. When i output $error object with curly braces - it is empty! Do i miss something important when setting attributes?
Are these validation rules you are trying to add in setAttribute directive?
If it so, you are doing in wrong way. When you use $set, it just adds attribute to HTMl, but doesnot compile them.
Hence, you won't get results as you are seeking.
You need to add it to pre compile
I think this solution may help you.
Add directives from directive in AngularJS
In short, I need to find a way to update ng-model when using bootstrap-datepicker. Here is a plunker I made to demonstrate what is going on http://plnkr.co/edit/nNTEM25I2xX2zRKOWbD1?p=preview. I've tried searching around and am fairly positive that I need to use a directive to pass a value to the model. Typing something in the text box will update the selected date model, but just using the datepicker does nothing. The below directive seemed like it should work but unfortunately it doesn't seem to have much of an effect.
app.directive('datepicker', function() {
return {
restrict : 'A',
require : 'ngModel',
link : function(scope, element, attrs, ngModelCtrl) {
$(function() {
element.datepicker({
dateFormat : 'dd/mm/yy',
onSelect : function(date) {
ngModelCtrl.$setViewValue(date);
element.datepicker("setDate", date);
scope.$apply();
}
});
});
}
}
});
An easy solution would be to just use another datepicker, but unfortunately due to restrictions on how many external libraries I can use this is the datepicker I have to use. Any insight would be greatly appreciated!!!
I strongly recommend using UI-Bootstrap or something similar.
But for those that need to use Bootstraps date-picker for whatever reason here is a starting place using your directive, with a few changes:
app.directive('datepicker', function() {
return {
restrict: 'A',
require: 'ngModel',
compile: function() {
return {
pre: function(scope, element, attrs, ngModelCtrl) {
// Initialize the date-picker
$(element).datepicker({
format: 'dd/mm/yyyy'
}).on('changeDate', function(ev) {
// Binds the changes back to the controller
// I also found that event.format() returns the string
// I wasn't aware of that. Sure beats using the date object and formatting yourself.
ngModelCtrl.$setViewValue(ev.format('dd/mm/yyyy'));
// I HATE using $apply, but I couldn't get it to work without
scope.$apply();
});
}
}
}
}
});
HTML:
<input type="text" datepicker="" ng-model="date" />
Very simple and straightforward and allows you to reuse, here is a working plunker
The two-way data-binding appears to be causing bad updates to the field. Clicking on the field raises the datepicker fine, but if you attempt to edit the field by directly typing in a date, it doesn't quite work.
Here's the fiddle demonstrating the issue: http://jsfiddle.net/vSNJF/
<input type="text" ng-model="name" ui-date-format='m/d/yy' ui-date>
Compare the keyboard-editing under Angular to the standard jquery UI date picker behavior here: http://jqueryui.com/datepicker/
How can I make ui-date delay updating the model until after the interactive calendar is dismissed?
You've got quite a big directive there, I am not sure if anyone is going to go through the whole code to find what is causing the problem. To help I will leave a simpler datepicker directive that behaves exactly like Jquery UI's but without all the features you have implemented in yours, maybe if your start from this point and go adding features it would be easier to debug the problem.
The directive is:
directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$(function(){
element.datepicker({
dateFormat:'dd/mm/yy',
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
}
});
Here is a Plunker and a blog post about it.
I am very new to Angular and have a specific use case in mind
I have a form which has two fields - Name and datetime.
The name is ng-model but datetime is not since it is not part of Angular and is a jquery component
What I want to do?
Here is the plunker = http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview
a.) I want to associate date to ngModel like ngModel="transaction.date"
b.) validate it as required using Angular way
Something which will look like (much like Angular)
<input type="text" name="transactionDate" ng-model="transaction.date" data-date-format="yyyy-mm-dd hh:ii" required>
Why?
a.) To to things Angular way
b.) It makes model more consistent to test, validate
I asked this question on Stackoverflow and it was recommended to use custom directive, can someone give me direction with example how to do it?
Please guide me further since I am not able to validate it currently
Thank you very much
Based on Ketan's answer, I had to write a new directive and associate the value form jQuery to ng-model, which then is validated with form. The directive looks like
app.directive('dateTime', function(){
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel){
if (!ngModel) {
console.log('no model, returning');
return;
}
element.bind('blur keyup change', function() {
console.log('datetime changed: ', $('.form_datetime input').val());
scope.$apply(read);
});
read();
function read() {
ngModel.$setViewValue(element.val());
}
}
}
});
The plunker can be found here
Assuming you know how to write directives, you need to use the NgModelController inside your directive and use the $setViewValue(value) method. (See example the below page).
http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
This has to be called from your custom Datepicker event which triggers when the user completes the selection.