I have a button in which i want to use as a link as well as want to use ng-click to close the dialog..I mean when i click cancel button the page must be loaded to home page and ng-dialog must be closed.Can anyone help me to solve this problem.The below method does not working .
<button class="btn btn-default" onclick="window.location='#/cancel'" ng-click="cancelbtn()">Cancel</a></button>
.when("/cancel",
{
templateUrl:"Htmlfiles/Home.html",
});
You need to create a scope function which is being called on button click event.
$scope.cancelbtn = function()
{
dialog.close(id)
$window.location.href= "#cancel";
}
Inside you scope function your can change ng-view with below code.
$window.location.href= "#cancel";
Don't forget to add $window dependency.
The first problem you have is that onclick and ng-click bind to the same event.
I'd recommend that you remove onclick in code and handle that in your controller, inside cancelbtn() function. How to do a redirect take a look at $location service here.
You can also send url as a parameter, e.g. ng-click="cancelBtn('#/cancel')"
Related
i want to perform 2 action on button click
1) is perform save operation and on that success
2)goto paypal
<form role="form" id="checkoutform" name="checkoutform" novalidate="novalidate" ng-submit="saveClick()" action="https://www.sandbox.paypal.com/cgi-bin/webscr">
...
...
..
<button type="submit" id="purchase" class="btn btn-primary">Purchase</button>
</form>
using angular js.
You answered your own question for #1 I believe.
1) is perform save operation and on that success
The ng-click="saveClick()" directive will fire the saveClick() function in your controller.
There you can perform your save operation.
If you don't have your app or controller setup visit AngularJS docs here. Angular Getting Started
2)goto paypal
For this, checkout out angular injected service $location. You can do something like $location.path("https://www.paypal.com")
Here is a link
If you need to hit the link from your controller rather than send the user to the page you'll want to use angulars $http injected service.
Here
when you have 2 form in 1 html file then if you want to call another form (2nd) on click of first form button then ...
this is the best solution using angularjs
i created on function in .js file
$scope.load = function () {
document.getElementById("paypalform").submit();
}
and call it in another function like save()
my first form have 1 button and its call save after that on success of save function i call this one...
$timeout(function () { $scope.load(); }, 1000, true);
this function calls another form(2nd) which name like paypalform.
and its working..
Can you please tell me how to get click event of button? Actually button click event does not fire.
Here is plunker
http://plnkr.co/edit/cqmwJc5dpoDWvai4xeNX?p=preview
var loginCntrl=function($scope){
$scope.testClick =function(){
alert('sss');
}
}
You are making a simple mistake by not including ng-controller. Change it as follows. It will work.
<div ng-app="firstApp" ng-controller="loginCntrl">
<ui-view name="test"></ui-view>
I am trying to pass an angular variable into a function click call.
this is what im trying to do so far:
<button onclick="dialogBox(id)">Cancel</button>
$scope.dialogBox = function (id) {
console.log('Succesfully submitted id: '+id);
});
onclick is a normal JavaScript event binder instead of an Angular one. You need to use global variables/functions in the onclick expression. However, in your code, dialogBox() is a function of $scope. So, if your button tag is wrapped inside the corresponding controller, just use ng-click instead. Like:
<button ng-click="dialogBox(id)">Cancel</button>
ng-click is the to slove this problem
<button ng-click="dialogBox(id)">Cancel</button>
When I click a button, it appears a popover which can be closed if you click the button inside the popover. However, if you click another button to open a popover, you will see two popovers at the same time and I want to keep just one.
I have tried with the trigger 'focus', but it closes the popover if I click in the textarea inside the popover, I expected that this trigger was called when you click outside of the popover.
Any idea for this? Can the methods $hide, $show be called from the controller?
Try to add ng-click="$hide()" on the dismissable element of the popover. I.E.:
<a class="btn btn-primary" ng-click="$hide()">Close</a>
It's not included in the documentation but it works for me, iff you use data-template for popover content, haven't tried with other opened popover yet.
This should be an old question, in latest version of angular-strap, a new attribute could be used in this case:
auto-close='1'
OK, I am pretty sure this is a terrible hack, but here goes. Assuming your popover templates all use the popover class (if you aren't using a custom template with the data-template attribute, they should), and they're siblings of the button that triggers them (if you haven't mucked with the container attribute, they are), you can apply the following directive to your popover buttons. Note: this assumes that the parent elements of your popovers and popover buttons have unique ids.
angular.module('yourApp.directives', []).directive('rmPopovers',
function($document,$rootScope,$timeout,$popover) {
return {
restrict: 'EA',
link : function(scope, element, attrs) {
var $element = $(element);
$element.click(function() {
$('.popover').each(function(){
var $this = $(this);
if($this.parent().attr('id') != $element.parent().attr('id'))
{
$this.scope().$hide();
}
}
);
});
}
}
}
);
And then
<button type="button" bs-popover rm-popovers [your data attribs here]>Button!</button
There is an issue in the angular-strap github project which asks exactly the feature you want.
Nevertheless, at the moment I'm writing this answer, it's still open.
trigger : 'focus' ,
worked for me on the same issue
I'm using a jQuery plugin to 'customize' my selects.
This plugin fires the change event of the original select when some option is selected.
The problem is that my scope doesn't change.
Here you can see a quick example... changing the select the scope changes. clicking the buttons the select changes but not the scope.
http://plnkr.co/edit/pYzqeL6jrQdTNkqwF1HG?p=preview
What am I missing?
You need to access the scope of the dropdown and then apply it as shown below:
$('button').on('click', function(){
var newVal = $(this).data('val');
$('select').val(newVal).change();
var scope = angular.element($("select")).scope();
scope.$apply(function(){
scope.selectValue = newVal;
});
});
When you click the button, angular goes out of its scope and uses jquery to manipulate the data/to perform some action, so we need to exlicitly call $scope.$apply() to reflect the changes back into the scope of the controller. And change your controller to this:
app.controller('AppCtrl', function($scope) {
$('button').on('click', function(){
$scope.selectValue=$(this).data('val');
$scope.$apply();
});
}
By the way you can use jquery event inside the angular..
Ideally in angularJS, controller should not update DOM reference directly. If you want to achieve same thing, you should expose one method over $scope and use "ng-click" directive.
If you want to achieve same using jQuery, it should go into directive as
$scope.$apply()
to update the scope.
In your jQuery put auto trigger e.g
$('#input').click(function(){
$('#input').val('1');
$('#input').trigger('input'); //add this line this will bind $scope Variable
});
It's best not to mix DOM manipulation with Angular. Try the following for your button HTML:
<button class="setVal" ng-click="selectValue=1">Set 1</button>
<button class="setVal" ng-click="selectValue=2">Set 2</button>
<button class="setVal" ng-click="selectValue=3">Set 3</button>
I tried the above in your Plunker and it worked.