I'm using modals via method, like:
this.showModal = function () {
return $uibModal.open({...});
}
and then in some method i call this function:
this.showModal().result.then(function (someResult) {...});
but how can i use dismiss, using method call?
becouse i use it without method, i can close my modal so:
$uibModal.open({...}).result.then(function (someResult) {
this.$dismiss();
})
but i have no clue, how to use dismiss, when i use methods promise...
maybe somebody have an idea?
The open method returns a modal instance with open, closed,dismiss ,close,rendered ,returned method.
In your case it is this.showModal is modal instance.
SO, you can call the close the method like this.
var self = this;
self.showModal = function () {
return $uibModal.open({...});
}
//close the modal
self.showModal.close();
You could store the modal in an object, either in the scope or move this to a service, and then call dismiss on the modal object
var modalInstance;
this.showModal = function () {
modalInstance = $uibModal.open({...});
return modalInstance;
}
and when using the promise
this.showModal().result.then(function (someResult) {
modalInstance.dismiss('cancel');
});
What I usually do is making a modal instance :
$scope.doSomething = function(){
var modalOptions = {...};
openModal(modalOptions);
}
function openModal(modalOptions) {
$scope.myModalInstance = $uibModal.open(modalOptions);
$scope.myModalInstance.result.then(function () {
//success callback
}, function () {
//error callback;
});
}
Later if i want to call close or dismiss simply call $scope.myModalInstance.close() and $scope.myModalInstance.dismiss('cancel').
Related
I have problems with jQuery callbacks
I try to do like this.
MainController.js
mapController = $.fn.mapController();
getMapController = function() {
return mapController;
};
mapController.js
(function ( $ ) {
$.fn.mapController = function(options) {
let mapController = {};
let settings = $.extend({
save: function(data) {}
}, options);
mapController.openModal = function () {
//OPEN MODAL
}
return: mapController
}
}(jQuery));
nextController.js
function setPlace() {
getMapController({
save: function(data) {
console.log("TEST")
}
}).openMapModal();
}
So... I try get mapController in nextController from getMapController method but not workink callbacks...
How I can get callbacks in nextController.js?
It seems like you have introduced some confusion by naming a jQuery plugin with the same name as the object that plugin returns. Both are called mapController. This is not a problem on itself, but in setPlace you call mapController as if it it is the jQuery plugin (passing it options), but it is in fact the object returned by it (see MainController.js), which is not a function.
So I think you'll want to change the MainController code, and make the global mapController variable equal to the jQuery plugin:
mapController = $.fn.mapController;
// ^^^^^ remove parentheses.
Like mentioned already, make sure to remove the syntax error in the return statement in the MapController; it should not have a colon after it.
getMapController() returns a function, you have to call it with ():
function setPlace() {
getMapController({
save: function(data) {
console.log("TEST")
}
})().openMapModal();
}
Also, you have an erroneous : on this line:
return: mapController
It should just be:
return mapController
I am using angular material $mdPanel, i can display it using the open() method but i can't remove it (using close button like the demo). The documentation is not clear about that, the close method doesn't work. Is there any solution for that ?
$mdPanel documentation
When you call $mdPanel.open(), it returns a promise. The call to the promise contains a reference to the created panel. You can call close() on that.
$res = $mdPanel.open(...);
$res.then(function(ref) {
$scope.ref = ref;
})
Later on, to close, call:
$scope.ref.close();
There is no close() method on $mdPanel it is instead a method on the panel reference, which is passed on the first argument to the controller for that panel. So to be able to close the panel you need to pass a controller function in your panel definition similar to below.
Hope this helps!
var config = {
...,
controller: PanelController,
controllerAs: 'panelCtrl',
template: '<div><div>Some content</div><button ng-click="panelCtrl.close()">Close</button></div>',
...
};
function PanelController(panelRef) {
this.close = function () {
panelRef && panelRef.close();
};
}
You can inject the mdPanelRef inside a controller and then call mdPanelRef.close()
var config = {
...,
controller: PanelController
};
function PanelController(mdPanelRef) {
this.close = function () {
mdPanelRef.close();
};
}
As the code shows,I want to use the parentCtrl add method in ChildCtrl because I want to notice the parentCtrl to refresh when it's done.
Do I have to use $emit or something?(I've think about it,but I would like to use add method in the parentCtrl context).
This is the way I use now,it works but I find it weird,what is the best way to do that?
function myserve() {
var self = this;
self.saveDefer = function (defer) {
self.defer = defer
}
self.getDefer = function () {
return self.defer
}}
function parentCtrl($q) {
self.workers = ['tom', 'jack'];
self.add = function (worker) {
add(workder).then(refresh)
}
self.clickGoChild = function () {
var defer = $q.defer();
defer.promise.then(self.add);
myserve.saveDefer(defer);
$state.go('child');
}
function childCtrl() {
self.doAdd = function () {
myserve.getDefer().resolve(self.newWorker)
}}
// I want to use add method in parentCtrl
Even though the scopes are prototypical inherited, there is no real inheritance in ngController.
It is possible to define the "add" method in the service so both controllers can use it independently. Then in order to refresh the "parent controller" just send an event like "controllerA:refresh" when you done adding.
I am trying to come up with a page on which, when user clicks a file button on the page, I try to execute the JS on the page. And I am trying to use OOP / class so hopefully it can be reused later. Here is my test code:
// This is the "class".
function BearUpload() {
// some values will go here...
}
// Add a few functions
BearUpload.prototype.function1 = function () {
console.log("function1 called");
}
BearUpload.prototype.handleFileSelect = function (evt) {
console.log("handleFileSelect called");
this.function1();
}
var myBear = new BearUpload(); // Create a global variable for the test
$(document).ready(function () {
var some_condition_goes_here = true;
if (some_condition_goes_here) {
$("#my-file-select-button").change(myBear.handleFileSelect);
}
});
However, it gets error like:
TypeError: this.function1 is not a function
this.function1();
Any idea about this?
Thanks!
Bind myBear to your change eventListener
In general when you access this from handleFileSelect, this refers to the html element.
i.e. this = <input type="file" id="my-file-select-button">
$("#my-file-select-button").change(myBear.handleFileSelect.bind(myBear));
The bind() method creates a new function that, when called, has its
this keyword set to the provided value, with a given sequence of
arguments preceding any provided when the new function is called.
MDN doc
You are trying to call function1 on DOM object but you have to call on jQuery object
$(this).function1();
That's because when bound as a handler to jQuery events, this would refer to the element on which the event is triggered.
I would rather change your code like this
// Create only one global variable for your app
var APP = {};
// Create class using immediate function/closure
APP.BearUpload = (function(){
//declare private variables here
// Constructor
var bearUpload = function() {
// some values will go here...
}
// Add a few functions
bearUpload.prototype.function1 = function () {
console.log("function1 called");
}
bearUpload.prototype.handleFileSelect = function (evt) {
console.log("handleFileSelect called");
this.function1();
}
return bearUpload;
}());
APP.myBear = new APP.BearUpload();
$(document).ready(function () {
var some_condition_goes_here = true;
if (some_condition_goes_here) {
$("#my-file-select-button").change(function(e){
// do something with event 'e'
APP.myBear.handleFileSelect.call(APP.myBear, e);
});
}
});
do not use "this", it is confusing some time.
BearUpload.prototype ={
function1:function(){
var self = this;
...
},
handleFileSelect:function(e){
var self = this;
...
}
}
I am using the $modal in angular-ui to create a modal window her is the code for creating the model.
this.show = function (customModalDefaults, customModalOptions, extraScopeVar) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.extraScopeVar = extraScopeVar;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(tempModalDefaults).result;
};
till now every thing is working fine. the model have close and dismiss which run when i hit cancel or OK on the modal window. the problem is when i press a click outside modal window it gets disappear that what i want but i also what to know which method runs on that case to override it for custom behavior like which i am doing with OK and Close
$modal.open(tempModalDefaults).result
is a promise. When the backdrop option is set to 'true', the promise will be rejected. You can can attach a rejection handler to that promise by using either the then method or the catch method which is shortcut:
catch(errorCallback) – shorthand for promise.then(null, errorCallback)
return $modal.open(tempModalDefaults).result.catch(function (reason) {
// your code to handle rejection of the promise.
if (reason === 'backdrop') {
// do something
}
});