AFAIK, the only way to get Angular mimick a back button behavior is via a call to $window.history.back.
Now, I have a form with two buttons: submit and cancel. When I submit, I have some custom logic, and in the end I can easily call the back() method. But how could I achieve the same without a custom method for the cancel button?
This is my current html
<div class="form-group">
<button class="btn btn-primary" ng-click="save(berlet)">Ok</button>
<a class="btn btn-warning" ui-sref="jogasok">Cancel</a>
</div>
I would like to have a back() behavior when clicking the <a> tag. Are there any recommendations for it? My preferred syntax would be something like: `Cancel :)
Make a simple directive, to keep your controller free from redundant $window pollution:
PLUNKER
app.directive('goBack', function($window){
return function($scope, $element){
$element.on('click', function(){
$window.history.back();
})
}
});
<a go-back>Cancel</a>
My best idea until now is to attach the $window service to my directive, and call the back button through the $scope.
<a class="btn btn-warning" ng-click="window.history.back()">Cancel</a>
and in my directive I have
$scope.window = $window;
Related
I have a list of customers each customer have button more info.
I want , when i click on it then showing bootstrap modal by AngularJs controller and then request data by $http.post and getting some more info about this customer and showing info inside modal.
How can i do this purpose ?
this button :
<button type='button' class='btn btn-primary btn-sm'
data-ng-click='moreinfo(customer.id)' >more info</button>
You can first pass each customer info variable to each more info.
Button like this :
<button type='button' class='btn btn-primary btn-sm btnmargin'
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
>more info</button>
then you should write this code inside controller :
$scope.customerinfo=[];
$scope.moreinfo= function(customer){
$scope.customerinfo= customer;
};
Html bootstrap modal :
<!-- Modal start -->
<div class='modal fade' id='cinfo' tabindex='-1' role='dialog'
aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>
<span aria-hidden='true'>×</span>
<span class='sr-only'>Close</span></button>
<h4 class='modal-title text-danger'
id='myModalLabel'>customer info</h4>
</div>
<div class='modal-body'>
{{customerinfo.firstName}}
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default'
data-dismiss='modal'>close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
Now you can click on each row button more info and see info in inside modal body.
Use ngDialog instead of bootstrap modal.
It is easy to implement in angularjs and you can have different controller for it as well and you can definitely transfer data from main page to this ngDialog.
https://github.com/likeastore/ngDialog
I will suggest you to go with ui-bootstrap but looking at other answers and considering you do not want to add any more JS library/plugin
Hope this helps you
Add a directive called bootstrap-modal as following
app.directive('bootstrapModal', ['$rootScope', '$http', function ($rootScope, $http) {
"use strict";
return {
restrict: "A",
//add isolated scope if you want
//scope: {
//},
link: function (scope, element) {
scope.$on('showModal', function (event, object) {
//fire your ajax here
$http.get('url').then(function(response){
//process your response alter DOM and show modal
element.modal('toggle');
});
});
}
};
}]);
and in your moreInfo function in controller
$scope.moreInfo = function(){
$rootScope.$broadCast('showModal', dataToPassToListener)
}
You should use the directive with the div which you want to show as modal. As in the same div where you would have given role="dialog" if you would have used simple bootstrap.js
I know that you don't want more JS plugin but I suggest you to use the UI Bootstrap for Angularjs:
https://angular-ui.github.io/bootstrap/
It's basically a set of pre-defined directives you can use to load Bootstrap component.
In your case, the thing can end like that:
<button type="button" class="btn btn-primary" ng-click = "moreinfo(customer.id)"> More Info </button>
In your controller :
angular.module('myApp').controller('CustomerInfoCtrl',['$uibModalInstance','$scope', function($uibModalInstance,$scope){
$scope.moreinfo = function(id){
var InfoModal = $uibModalInstance.open({
templateUrl : 'route/to/my/template.html,
controller: 'MoreInfoCtrl',
scope: $scope,
resolve: {
customerId : function(){
return id;
}
}
});
InfoModal.result.then(function(){
//callback when modal closed
},function(){
//callback when clicked on cancel to dismiss the modal
});
}]);
Then you create another controller, MoreInfoCtrl:
angular.module('myApp').controller('MoreInfoCtrl',['$http','$scope','id', function($http, $scope, id){
//Do your http call with the variable id (i.e the customer.id )
}]);
You have plenty of options. You can easily pass variables, scope or do callback process.
I'm using it a lot in a project and it really helps a lot.
I suggest you to try it. And it's not really heavy (from above link):
Whichever method you choose the good news that the overall size of a
download is fairly small: 122K minified for all directives with
templates and 98K without (~31kB with gzip compression, with
templates, and 28K gzipped without)
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
I am using the angular-bootstrap in AngularJS, because I want to use dialogs. In my HTML I have the following code:
<script type="text/ng-template" id="create.html">
<div class="modal-header">
<h3 class="modal-title">Welcome!</h3>
</div>
<div class="modal-body">
<p>Hi</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
The modal dialog shows up, but nothing happen when I click on the "OK" button.
There is also no error in the console. When I create a button and place it outside the script, then it works. But I need to use the button in the modal dialog.
I have created a factory for the modal dialog, because I want to use it in my controller. Here the function what works fine:
$scope.createGame = function(data){
// Open the modal dialog
ModalFactory.open();
}
Now the modal dialog shows up and the button "OK" appears. When I click on "OK" nothing happen. This is the function I have created for the "OK" button.
$scope.ok = function(data){
// Close the modal dialog
alert("Test");
}
But the triggering of ng-click in that script what you see above doesn't work...
Your function requires a parameter "data" but you are not passing it.
<button class="btn btn-primary" ng-click="ok()">OK</button>
Either Change your function signature like this,
$scope.ok = function(){
// Close the modal dialog
alert("Test");
}
Or Pass the data.
It's always use a different function name rather than just "ok"
I'm using AngularStrap with bootstrap.
I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?
I instantiate the controller on a button like this:
<button type="button"
class="btn btn-success btn-lg"
bs-modal="modal"
data-template="user-login-modal.html"
data-container="body"
ng-controller="userLoginController"
>Click here to log in</button>
and the userLoginController has this:
$scope.authenticate = function(){
this.hide(); // this doesn't work
}
This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.
I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.
If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?
here's my plnkr:
http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview
When in the on-click function do
$scope.myClickEvent = function () {
this.$hide();
}
Figured out a good method:
I moved the ng-controller to the TEMPLATE and instantiate the modal using the provided modal service. I then use a rootscope broad cast to let everyone know that someone successfully logged in.
new controller code:
var loginModal = $modal({template:'/template.html', show:false});
$scope.showLogin = function(){
loginModal.$promise.then(loginModal.show);
}
$scope.$on("login", function(){
loginModal.$promise.then(loginModal.hide);
});
the button just looks like this now:
<button type="button"
class="btn btn-success btn-lg"
ng-click="showLogin()"
>Click here to log in</button>
and my template has the old ng-controller in the first tag.
I am probably too late, but just wish to share my answer. If all you need is hiding the modal after form success, then bind that $hide function to one of controller varriable.
<div class="modal" data-ng-controller="Controller" data-ng-init="bindHideModalFunction($hide)">
In the controller:
// Bind the hiding modal function to controller and call it when form is success
$scope.hideModal;
$scope.bindHideModalFunction =function(hideModalFunction){
$scope.hideModal = hideModalFunction;
}
I found all of the above answers way too complicated for your use case (and mine when I ran into this problem).
All you need to do, is chain the ng-click to use the built in $hide() function that angular strap bundles.
So your ng-click would look like: ng-click="authenticate();$hide()"
Using Angular and bootstrap if you want to submit data to controller then have the modal close just simply add onclick="$('.modal').modal('hide')" line to the submit button. This way it will hit the controller and close the modal. If you use data-dismiss="modal" in the button submit never hits the controller. At least for me it didn't. And this is not to say my method is a best practice but a quick one liner to get data to at least submit and close out the modal.
<div class="modal fade" id="myModal" ng-controller="SubmitCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form ng-submit="submit()">
<input type="text" ng-model="name" />
<button type="submit" onclick="$('.modal').modal('hide')">Submit</button>
</form>
</div>
</div>
</div>
</div>
Perhaps open it with the service on click and have it close itself on the $destroy event?
$scope.openModal = function()
{
$scope.modal = $modal({
template: "user-login-modal.html",
container="body"
});
}
$scope.$on("$destroy", function()
{
if ($scope.modal)
{
$scope.modal.hide();
}
});
Below is my plunker edit.
I was able to get checkbox values. Now I'm trying to pass those checked values onclick to http or inside ng-click=deleteSelected function.
http://plnkr.co/edit/wsd3oDr3SyQXvO8Fdh5F
Can anyone help me ?
Now that you have bound the values to $scope.checked-messages, can't you just use the $scope in a click handler:
HTML:
<button id="btn-call" type="button" class="btn btn-danger" ng-click="callTheServer()">Call The Server</button>
JS (Controller):
app.controller('MainController', function($scope) {
$scope.checked_messages = [];
$scope.callTheServer = function() {
console.log($scope.checked_messages);
}
});
Here is an updated plunker.
You should wrap your form in a tag and declare your button as a submit type like this
<form ng-submit="deleteElements()">
//checkboxes stuff
<button id="btn-delete" type="submit" class="btn btn-danger">Delete</button>
</form>
Now in your controller you declare your deleteElements function :
$scope.deleteElements = function(){
console.log(this.checked_messages);
}
Answer from Davin is good but I try to avoid to bind everything to scope whenever I can.