I am currently working on an angularJS application. I have an HTML form with around 40 controls. All other controls are rendering fine except the select fields. There are around 16 select fields on my page, and this select fields is an angular directive. When I say select field is not rendering fine, I mean it loads however it first stretches to a bigger size and then comes to it's size specified in CSS. Hence the rendering is not smooth. Any particular reason why my select fields are stretching and then comes to a normal size? Thanks for the help in advance.
The possible reason I see why this happens is that the browser loads your select elements before it finishes loading your css files or angularjs file. Please try declaring the width of the select field using inline css on your directive template.
<select style="width:100px"><option>Option 1</option></select>
Another solution that you may try is using the "elem" parameter in your directive declaration.
app.directive('test', function() {
return {
restrict: 'AE',
replace: true,
templateUrl: '<select><option>Option 1</option></select>',
link: function(scope, elem, attrs) {
elem.css('width', '100px');
}
};
});
Hope this helps! :)
This happens due to slower response from database. All 16 drop down data coming from DB correct. You can optimized your angular script.
Related
How do I enforce form requirement and validation on a custom form control in which the required data is not in a regular control?
I am using a custom user control called a Search and Select which can be found here, and although useful, it lacks some validation functionality. The control allows the user to do a typeahead search by typing into a textfield (#1), which then modifies a dropdown (#2). When an item in the dropdown (#3) is clicked, it becomes selected, causing the name of the item to also be displayed at the top (#4) and to have a checkmark displayed next to it in the dropdown list.
How can I enforce that an item has been selected on this control? Information that I've found on forcing the usage of require/ngRequire for custom controls comprised of other controls within it involve propagating the requireness of one of those inner controls - for example, making the whole Search control use the required status of the textbox contained within. However, this would be inaccurate - what is in the textbox is irrelevant, and whether something is selected is actually a matter of whether a behind-the-scenes local variable is set and whether its name is displayed in raw text.
I have attempted to modify the directive by requiring ngModel and modifying ngModel.$isEmpty. However, this does not appear to have any effect.
link: function (scope, elm, attr, ngModel) {
...
ngModel.$isEmpty = function(value) {
return (!scope.selectedItem || scope.selectedItem === {})
};
...
}
How can I force the requiredness of this field to be based off of the value of scope.selectItem?
So I have some trouble with my angularjs application. I try to implement a specific directive that make allow to translate my app easily. It works well on my text fields, but it doesn't work on input field to change my placeholder.
To be clear, here you can see some code sample :
http://plnkr.co/edit/GUS2FYCxA6wAOtkoxG66
$scope.validform = function() {
console.log($scope.valuefield);
};
As you can see, when i click on the button, my input model "valuefield" is "undefined". Or i want to see the value of the input.
What seems really strange for me is that the directive change the placeholder, but do not touch at the model.
I think I have to be more specific on the scope definition of the directive, or to use some $watch function but I am not sure how.
Can anyone guide me on this?
Ok, so finally it was pretty easy.
I only had to change my directive parameter from
scope : true
to
scope : false
By doing this, my directive is using the exact same scope than the controller. So The scope controller is not change and steal working as it should be.
I have lines of text generated by ng-repeat, displayed within a div. I would like the user to be able to select from those lines and press a button, and have the application know which lines the user selected
Is there any way to do that in AngularJS
In order to capture selected text in a browser, try the Rangy library. I have created a small example of how to use it. I'm sure you can expand it to match your needs.
If you need to take action immediately after user select the text (without button), you should listen for mouseup event. The following directive should help:
angular.module('myModule').directive('watchSelection', function() {
return {
link: function(scope, element) {
element.on('mouseup', function(event) {
var selection = rangy.getSelection();
// do something with selected text
});
}
};
});
You may also find this answer interesting.
Hoping to re-create some of the functionality that's available to us in Angular 1.3.X -- the app I am creating has to work well (or at least well-enough) in IE 8. For that reason, I am (sadly) constrained to not using 1.3.X. I've been running into some trouble trying to emulate the $ng-touched attr that is available in 1.3.X.
One part of our app needs to alert users that their form element is invalid if they've tab-bed through it. As it stands, it doesn't set the $invalid attr on any form elements unless I've entered in text and deleted it. I tried using $pristine and $dirty to achieve $invalid after tabbing through, but they both seem to act based on the input's value, not whether it's been touched (maybe this was one of the big advantages of 1.3.X)
Goal: when a user tabs through a form, validations can be fired and set each empty form element as $invalid if it's blank. Basically to emulate the behavior of the $ng-touched attr in 1.2.X. Here's what I have so far:
angular.module('goodStewardApp')
.directive('chf-validate', function () {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
$(elm).blur(
function(elm) {
ctrl.$setValidity(elm, false);
}
);
}
};
});
Any help would be greatly appreciated. Thanks!
Turns out the best way to accomplish emulating the behavior of ng-touched in angular 1.2.x is to use ngBlur to set a validation attribute to be true. So:
<form name="aForm">
<input name="foo" ng-model="foo.bar" ng-blur="validateThisElement=true" ng-required="true">
<div ng-show="aForm.foo.$error.required && validateThisElement">
Oh no! An alert!
</div>
</form>
This allows you to run a validation after a user tabs through your form, a common way that people used to using computers will use to interact with your angular form/app. Hope this helps anyone still stuck w/ 1.2.X for IE8 reasons!
I have a small SPA using angular-ui-bootstrap to provide the tabs component. The app mostly just displays data showing the operational status of an application, but one of the tabs has an input field that should get the focus when that tab is opened.
The controller for each tab component has a "tabOpened" and "tabClosed" function, which is called when that tab is opened or closed.
In the controller for the tab with the input field, I have the following:
$scope.tabOpened = function() {
$timeout(function() {
angular.element("handlerSearchInput").focus();
});
};
It's worth disputing whether it's reasonable to do this in a controller, as opposed to engineering some sort of directive to make the "focus()" call, but that's not the issue I need to solve first. My first problem is that this code doesn't actually work. I can see it hit the breakpoint in the function when I open the tab, but the field doesn't get the focus. There are no errors, it just doesn't work.
I've tested this in both Firefox and Chrome.
angular.element takes either string - in which case it will create a new element, or a jQuery selector which will return an existing element
so you should use angular.element("#handlerSearchInput").focus();
(API)