I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
Related
I want to disable this button after the onclick function, so either change the z-index, or disable the button, any ideas?
<button id ="a" type="button"
onclick="window.open('https://www.google.ca')"
>
Thanks.
You need to add this.disabled=true after opening the window.
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
Code above needs 'disabled' instead of 'disable.' Try this:
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
The approach is that you should create a script contain function that does two jobs:
make that button disable using selectById() and adding attribute disabled
then window.open()
i would take a look at jquery
https://api.jquery.com/click/
$( "#a" ).click(function() {
// do your stuff opening a page etc
$( "#a" ).prop("disabled",true);
});
edit:// take Rohit Saxena's approach
this is my first time posting, so forgive a noob if I don't get the format correct. I needed to be able to easily turn a button on and off to 'guide' the user to perform actions in the correct order, and this post helped me in that journey, although I only used part of the answer. I made two functions 'enableClick()' and 'disableClick()', where the parameter is the id of the button, eg: 'enableClick("betButton")' Here is the code:
function disableClick (elementId) {
const x = document.getElementById(elementId);
x.disabled = true;
}
I'm learning js, so everything I'm doing is vanilla at this point on purpose, but it's still fairly simple - obviously, with the enableClick function, the value of x.disabled would be 'false'. These functions can be added inside a function called by a click, after the initial click functionality is complete, so that the button can't be clicked again until the opposite function is called.. love this stuff!
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 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.
I was wondering if anyone knew how, when on link submit the page does not move i.e
If it was 2 page lengths down it would shoot up to the top.
If you have attached event to HTML control through jQuery then you can use return false like
$("#myDiv").delegate("tr", "click", function() {
enter code here
return false;
});
No need to replace anchors, as your own answer to the question states.
This will work just as well:
<a href="#" onclick="yourOwnSubmitFunction(); return false;">
In short, just make sure that whatever function is in the onClick handler returns boolean false.
Whilst having the link's onclick handler return false; is the correct way to stop a link being followed, it's a bit of a hack to use a link this way, because what you've got is an action and not a link. You can't do the usual link-like things to your link, like right-click-bookmark, or middle-click-for-new-tab and so on, so it shouldn't really have that affordance.
An alternative (that eg. SO uses) is to put the onclick on a non-link element instead, eg.:
<span id="potato">Do something</span>
<script type="text/javascript">
document.getElementById('potato').onclick= function() {
// do something
};
</script>
This is cleaner, but has a drawback in is that the link can't be focused and activated by the usual keyboard tabbing method.
Arguably better is to use an <input type="button"> or <button type="button">, which are the right markup to represent an action. Of course these look quite different, but you can use CSS to style them so that they look like a link instead of a button if you like. The one drawback of this method is that good old silly IE cannot completely restyle a button; you will get a few pixels of unremovable extra padding in this browser.
If you are using .net 2.0
There is a
MaintainScrollPositionOnPostback
property in #page directive that you can use to maintain the scroll position of the page.
Gets or sets a value indicating
whether to return the user to the same
position in the client browser after
postback. This property replaces the
obsolete SmartNavigation property.
When Web pages are posted back to the
server, the user is returned to the
top of the page. On long Web pages,
this means that the user has to scroll
the page back to the last position on
the page.
When the
MaintainScrollPositionOnPostback()()()
property is set to true, the user is
instead returned to the last position
on the page.
If you can't use this then set location.href to an anchor tag at the specified position after the submit.
location.href = "#anchAtPos";
where anchAtPos is the id of the anchor tag at a specified position.
I solved this using:
function anchorReplace()
{
$("#reportWrapper a").each(function(i){
var anchorElement = $(this);
var newAnchorElement = $('<a href="#link' + i + '" name="#link' + i + '">'
+ anchorElement.text() + '</a>').insertBefore(anchorElement);
anchorElement.remove();
});
}
I've fixed this before by putting
onclick='return false;'
Inside the link
<a href="#" onclick='return false;' id='attachAlistenertothisID'>This link doesn't jump to the top!</a>
I use this for my links that have click listeners attached them via jQuery.
Hope this helps someone!