On ngDialog (https://github.com/likeastore/ngDialog), is there a built in way to close a dialog from within the template it self? I.e. so I don't need any functions in the controller calling the dialog?
This is my template (errorPopup.html):
<div>
<div class="alert alert-warning">
<div class="errorLogo"><i class="icon-exclaim"></i></div>
<div class="errorContent" data-ng-bind-html="errorMessage"></div>
</div>
<div class="buttonWrapper">
<button type="button" class="btn-primary pull-right">
<span res="close"></span>
</button>
</div>
</div>
And this is how I open the dialog:
function showErrorPopup() {
ngDialog.open({
template: 'errorPopup.html',
scope: $scope,
className: 'ngdialog-theme-default ngdialog-cart-theme',
showClose: true,
appendTo: 'div[ui-view]',
closeByDocument: false
});
}
So when I call showErrorPopup() I get a dialog displayed, however, I need to make this "close" button to actually dismiss/close the popup. As of now, this is just a plan button that doesn't do anything.
Is there something I can do a the template level (without changing my controller's code) to make the button work?
Maybe I should be using a default button instead of my own? If so, how?
PS: I notice thats clicking on the X button on the top right works, the popup is dismissed.
Thanks all!
You don`t have to inject ngDialog module in your $scope. You can call closeThisDialog() function in your popup template directly:
<button ng-click="closeThisDialog(0)">Close</button>
function argument is the value to resolve popup with.
If you want to call the close function of the ngDialog directly from the view, you must inject the module itself to the scope inside the controller, in order for it to become available from the view:
$scope.ngDialog = ngDialog;
Then, you can use it directly from within the view:
<button ng-click="ngDialog.close()">Close</button>
It is hard to say what exactly you are doing wrong, until you paste some controller and app.js and HTML code contents.
Yes, ngDialog has built-in way of closing the dialog
Make Sure you set the className to 'ngdialog-theme-flat ngdialog-theme-custom' or other css class as described in the docs inside open function.
You have added handler with name "closeThisDialog" , but function has another name "closePopup".
Maybe it is your issue.
just follow these steps
1.when creating app
var app = angular.module('sampleApp', ['ngDialog']);
2.use button like this
<button ng-click="clickMe()">Click to Open</button>
3.put this in your controller
`$scope.clickMe = function () {
ngDialog.open();
};`
by default it has code to close,It'll close automatically when you click on close.
Hope it'll be useful
Related
I need a small help.I have a controller in angular as
app.controller('dataTableCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder)
{
...
}
How can i call this controler only after the button ng-click is done.can anyone please help me out in this.
Note:
I already have a main controller.
You can do this whith the ng-controller direktive. From the Docs.
Disclaimer: I do not know how to nest controllers.
In your case:
<div ng-controller="dataTableCtrl" class="btn btn-default" ng-click="yourFuncHere">
Button label
</div>
But!: you should think about to externalise your data table logic into a factory and youst call this factory from your main ctrl. Normaly it is better style to just have on ctrl per page (navigationCtrl aside)
I'm new to Angular-strap and AngularJS. I'm working on a project that is gonna be using both of them.
Scenario
My idea is to have multiple Modal template files for Angular-strap (w/ header, w/ header and footer, etc.). In some of these templates I would like to load different HTML file, so the Modal template file can be like a wrapper. The idea is that these different HTML files will have their own controllers and scopes. I would like to use those scopes in Modal template files to display specific data like: title, buttons, text of buttons, etc.
Problem
Seems like I'm not able to use both data-template-url and data-content-template (or at least it's not working on my side). I can use one of them, for example, in this case below, only data-template-url is used.
<button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" data-template-url="views/mb-templates/popups/dialog-simple.html" bs-modal="modal" data-content-template="views/mb-templates/dialog-inner-content.html">Custom Modal
<br />
<small>(using data-template)</small>
</button>
Questions
Is it possible to create the scenario that I've described?
If it is, how this can be done?
It should be possible if you use templateUrl to return a function, and within the function you make your conditional template selection. The Angular Directive documentation's section on a "Template-expanding directive" has a good example. Here's a link to the Template-expanding directive example's Plunker. The example's directive code looks like this:
.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr){
return 'customer-'+attr.type+'.html';
}
};
});
I'm attempting to learn AngularJS (background in BackboneJS). I have a div with some content inside, and I hope to render this div as a modal upon clicking inside of it:
<div class="stickynote"> Content here </div>
My thinking is to add a modal class that I can style in CSS. However, I'm not too sure how to add the modal class upon clicking (and conversely, removing the modal class upon clicking after the modal is rendered). Would I have to use ng-click and somehow set the class property from the JavaScript (myApp.js) file?
If you want to use your own modal styling and if you simply want to achieve adding an extra item to class attribute of your element, you can use a combination of ng-class and ng-click:
<div class="stickynote"
ng-class="{yourModalCSSClass: isModalOpen}"
ng-click="isModalOpen = true">
And somewhere else, you need another ng-click to turn it off:
<button ng-click="isModalOpen = false">Close modal</button>
Beware that both div and button must be in the same scope hierarchy to be able to use the same isModalOpen value. And by the way, I haven't tried this code but this should give you an idea. If you have a controller/directive, you can set isModalOpen from there by introducing functions in the scope:
// controller
$scope.toggleModal = function () {
$scope.isModalOpen = !$scope.isModalOpen;
}
<div ...
ng-click="toggleModal()">
<button ng-click="toggleModal()">...
If you're open to using a third-party solution, ng-dialog is an outstanding solution for modals+Angular.
https://github.com/likeastore/ngDialog
Please, consider the following example for understanding my question:
<button ng-class="$scope.controllerMethod($thisButton)" />
In my controllerMethod, I want to get a reference of the button who called ng-class. Is it possible?
(Something like passing $event.target in the ng-click button, so I can read the caller from the controller).
Any helps? Thanks!!
If you're hard coding each of your button in your menu, you won't need ng-class. Simply ng-click=doSomething('$event'), then the rest is just like your normal Javascript, do whatever you want with $event.target.
If you want do it the angular way, each button needs to have a corresponding model in the controller.
<ul>
<li ng-repeat='btn in buttons'>
<button ng-class='{"highlight":btn.clicked}' ng-click='doSomething(btn)'></button>
</li>
</ul>
In your controller:
$scope.buttons = [{text:'button1'},{text:'button2'}];
$scope.doSomething = function(btn){
btn.clicked = true;
}
In this example, ng-class will watch each button's clicked property, if it's true, then add highlight class onto this button.
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();
}
});