For an application which is close to be developed completely, requirement is to make focus management.
The popup opened should focus on the first HTML element
On successful login, the focus should point to navigation links.
On every route or page load, the focus could be defined in a generic way if possible.
Any ideas people for getting the above three requirements done for the application.
For 1st one, i can do manually the auto-focus attribute for the form or html element to keep focus on it or any other generic way for achieving it? Also, about the other two points?
Thanks in advance
You could start with this directive and apply it when needed, if I understood what you need:
.directive('autofocus', function() {
return {
restrict: 'A',
link: function($scope, element) {
element[0].focus();
}
};
HTML:
<input type="text" name="test" autofocus>
Related
I want to have a pair of radio buttons sitting over an HTML table so that whenever the rb is clicked it will cause the table to rebuild (rebuild the page) by submitting a different URL variable. Is there a way to do this without having to build a form and click a submit button? I'm pretty new to this stuff so please keep any answers basic and/or show samples of code. Thanks!
Html is a Markup Language it will not do the logic for you. that way javascript is there .
<input id="gotogoogle" type="radio" name="name" value="google" checked>
<script>
var radiob = document.getElementById("gotogoogle");
radiob.addEventListener("change", function() {
if(radiob.value == "google")
{
document.location = "http:\\www.gooogle.com"
}
});
</script>
Yes there is, you can use Javascript event binding to help you achieve this. This will get you started. This adds an event binding so when you "change" or click the radio buttons, it can fire an event off.
From here you'd need to research how to rebuild the table data in JS if you don't already know.
$("input[#name='nameofinput']").change(function(){
// Do something interesting here
});
I'm designing a particular page where wherever I click I want to go back to the homepage.
All of the page in enclosed in a section:
<section id="test-page-1" ui-sref="project.home">
</section>
The problem is that I have 3 particular buttons in this page and are not working as they should, instead they are also redirecting me to the Home page.
Z-index didn't solve the problem as from what I read it only works on a visual perspective rather than functionality. I'd really like it if I can still use the ui-sref="project.home" in the whole section as it is. Any ideas please ?
In the functions associated with you button clicks, stop the event propagation.
$scope.buttonFunctioanlity = function (e) {
e.stopPropagation();
};
<button ng-click="buttonFunctioanlity($event)">Click Me</button>
You know what ui-sref is right?
Changing your application state and redirecting to different url (Home in your case)
not really understood your problem, but remember you can add ng-click together with ui-sref to do some function before redirecting (might help your logic)
like
<section id="test-page-1"
ng-click="doSomething(someParams)"
ui-sref="project.home"></section>
and controller
$scope.doSomething = function(someParams) {
// bla-bla-blaaa
}
I'm starting to learn angularJS better, and I've noticed that AngularJS tries to make strong emphasis on separating the view from the controller and encapsulation. One example of this is people telling me DOM manipulation should go in directives. I kinda got the hang of it now, and how using link functions that inject the current element allow for great behavior functionality, but this doesn't explain a problem I always encounter.
Example:
I have a sidebar I want to open by clicking a button. There is no way to do this in button's directive link function without using a hard-coded javascript/jquery selector to grab the sidebar, something I've seen very frowned upon in angularJS (hard-coding dom selectors) since it breaks separation of concerns. I guess one way of getting around this is making each element I wish to manipulate an attribute directive and on it's link function, saving a reference it's element property into a dom-factory so that whenever a directive needs to access an element other than itself, it can call the dom-factory which returns the element, even if it knows nothing where it came from. But is this the "Angular way"?
I say this because in my current project I'm using hard-coded selectors which are already a pain to mantain because I'm constantly changing my css. There must be a better way to access multiple DOM elements. Any ideas?
There are a number of ways to approach this.
One approach, is to create a create a sidebar directive that responds to "well-defined" broadcasted messages to open/close the sidebar.
.directive("sidebar", function(){
return {
templateUrl: "sidebar.template.html",
link: function(scope, element){
scope.$root.$on("openSidebar", function(){
// whatever you do to actually show the sidebar DOM content
// e.x. element.show();
});
}
}
});
Then, a button could invoke a function in some controller to open a sidebar:
$scope.openSidebar = function(){
$scope.$root.$emit("openSidebar");
}
Another approach is to use a $sidebar service - this is somewhat similar to how $modal works in angularui-bootstrap, but could be more simplified.
Well, if you have a directive on a button and the element you need is outside the directive, you could pass the class of the element you need to toggle as an attribute
<button my-directive data-toggle-class="sidebar">open</button>
Then in your directive
App.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
angular.element('.' + attrs.toggleClass).toggleClass('active');
}
};
}
You won't always have the link element argument match up with what you need to manipulate unfortunately. There are many "angular ways" to solve this though.
You could even do something like:
<div ng-init="isOpen = false" class="sidebar" ng-class="{'active': isOpen}" ng-click="isOpen = !isOpen">
...
</div>
The best way for directive to communicate with each other is through events. It also keeps with the separation of concerns. Your button could $broadcast on the $rootScope so that all scopes hear it. You would emit and event such as sidebar.open. Then the sidebar directive would listen for that event and act upon it.
I'm using EmberJS for my webapp and when I create a new record (set in edit mode), my first field (input text) has the autofocus="autofocus" parameter set. It works on Chrome the first time without problem, but not after.
The page loads once because it's an Ember app, and the views (record views) are being re-generated when I create a new record.
Any idea how to resolve this issue?
EDIT:
I have removed the autofocus property, and tried only to use Jquery focus() like in https://stackoverflow.com/a/14763643
App.FocusedTextField = Em.TextField.extend({
didInsertElement: function() {
this.$().focus();
}
});
Now, there is no focus even the first time. Also, if I tried replacing this.$().focus(); with this.$().hide();, then the input is hidden. this.$() in the console shows the right input as well, but focus() just does not work!
I would consider moving your input to a view or a component and then do something like this.$().focus(); in the didInsertElement function.
I came across the exact same issue with autofocus but the .focus() function did work for me. Here's how I coded it:
html:
<input type="text" id="idTextbox"/>
javascript:
$('#idTextbox').focus();
I am trying to create a text box that when typed in it automatically adds that text right under the box. I know it sounds a bit pointless but I really need this and can't figure out how to do this. I would appreciate all help. I have come across
**HTML**
<input name="name" id="name" />
**jQuery**
$("#name").change(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
But it doesn't work for me I've tried it.
Thanks!
Your code runs as expected (see this jsFiddle).
Some tips for you. When working with DOM elements, make sure that you wrap your jQuery code around the DOMReady event. You can use the $(function() { }); shortcut as follows:
$(function() {
$("#name").change(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
});
You should also be advised that change() is only triggered when the input element is blurred (i.e. loses focus). For a 'live' change, consider using keyup() as follows:
$(function() {
$("#name").keyup(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
});
You can see the above in action at this jsFiddle
Rather than using the change event, try the keyUp event for the input.
http://api.jquery.com/keyup/
The change event is not fired until the input loses focus, so that is why it isn't updating as you go.