i have add in the controller of my modal an $state.go on my submit button function , at the first time it is invocked but when i try to open again the modal and submit it another time the $state.go didn't invocked.
ModalCtrler.js
$scope.addElet= function(){
------
$state.go('state1',{OBJ: OBJ});
}
the modal is defined in my run app.js:
myApp.run(function($rootScope, $modal,$state) {
$rootScope.$on('$stateChangeStart', function(event, toState,toParams) {
if (toState.name == 'addPopup') {
$modal.open({
templateUrl : 'add.html',
controller : 'ModalCtrler',
backdrop: 'static',
keyboard: false,
});
event.preventDefault();
}
}
}
the modal is called when i click in ui-serf :
<a ui-sref="addPopup({OBJ: OBJ})">
<button type="button" class="btn btn-add pull-right">ADD</button>
</a>
Am i missing somthing in my code? anu idea?
Issue solved by relaoding the state:
$state.go('state1', {OBJ: OBJ}, { "reload": 'state1''});
Thanks to link stackoverflow
I think your problem is:
You do nothing with modal before you call $state.go('state1',{OBJ: OBJ});
Try to hide it and only after call $state.go
var modalInstance = $modal.open({
templateUrl : 'add.html',
controller : 'ModalCtrler',
backdrop: 'static',
keyboard: false,
});
and something like:
$scope.addElet= function(){
$modalInstance.close(); // or $modalInstance.dismiss();
$state.go('state1',{OBJ: OBJ});
}
Related
Right on the first user login to my app I display a terms and conditions pop up. It can be easily closed in Dev Tools and the app can be freely used. How can I possible watch a sessionStorage variable requireTerms? requireTerms changes from true to false depending on whether the terms and conditions have been accepted.
I want to detect a click if the modal has been closed in html editor and re-open pop-up again.
Is there an AngularJS way of setting up a config to do that?
I've got this function in one of my services
var service = this;
service.showTerms = function() {
$uibModal.open({
templateUrl: 'app/terms/terms.html',
controller: 'tsAndCs as vm',
size: 'md',
backdrop: false,
keyboard: false
}).result.then(function(response) {
}, function() {
});
};
so I can basically call appState.showTerms(); however I am trying to figure out how to detect that window has been forced to be closed and call the function.
#edit
I thought of having a variable requireTermsOpened (which will be set to false only when user actually clicks on 'Accept') when the modal is displayed and writing something like
var requireTerms = sessionStorage.getItem('requireTerms');
var requireTermsOpened = sessionStorage.getItem('requireTermsOpened');
if(requireTerms && requireTermsOpened) {
appState.showTerms();
}
$uibModal.open({
templateUrl: 'app/terms/terms.html',
controller: 'tsAndCs as vm',
size: 'md',
backdrop: false,
keyboard: false
}).result.then(function(response) {
})
.catch(function() {
// Here you can add your code, its the event that gets called when the modal is dimissed
});
Please test it, I am quite sure it will help you, sorry if its bad formatted, I believe you got the idea, right?
You can try something like the below code. Also check this plunker for your given example scenario.
Controller:
$scope.modelFn = function() {
var modalInstance = $uibModal.open({
templateUrl: 'confirmationWindow.html',
windowClass: 'modal',
controller: function ($scope, $uibModalInstance) {
$scope.confirm = function(userAgreement) {
$uibModalInstance.close(userAgreement);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
},
size: 'md',
backdrop: false,
keyboard: false
});
modalInstance.result.then(function(selectedItem) {
if (selectedItem) {
alert('Selected check box and clicked OK!');
}else{
alert('Clicked OK Button without Selecting Checkbox!');
}
}, function() {
alert('Clicked Cancel button or Considered cancel on click of outside the Model popup window!');
});
};
Template:
<div ng-controller="MainCtrl">
<script type="text/ng-template" id="confirmationWindow.html">
<div class="modal-header">
<h3 class="modal-title">Terms & Conditions</h3>
</div>
<div class="modal-body">
<p>...........</p>
<p>
<input type="checkbox" ng-model="userAgreement"/>
Are you agreed with all terms and conditions?</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="confirm(userAgreement)">Confirm</button>
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn" ng-click="modelFn()">Open Modal</button>
</div>
I've got an ons-button element
<ons-button modifier="large--cta" ng-click="login($event, input.email, input.password)">Log In</ons-button>
And a function (login) that is attempting to use the startSpinner() method of OnsenUI's ons-button to start a spinner on the button to show the user that the app is working on their request.
I've tried the following without success. None of these functions are defined per the console.
event.currentTarget.startSpinner()
event.target.startSpinner()
startSpinner(event.currentTarget)
How do I go about starting a spinner on the button from a function called via ng-click?
What you need to do is firstly to define a service as follows:
app.factory('service', ['$rootScope', function($rootScope) {
return {
showSpinnerAuto : function() {
modal.show();
setTimeout('modal.hide()', 10000);
},
showSpinnerTimer : function(timer) {
modal.show();
setTimeout('modal.hide()', timer);
},
showSpinner : function() {
modal.show();
},
hideSpinner : function() {
modal.hide();
}
};
}]);
You also need to define spinner model in your view as below:
<ons-modal var="modal">
<i class="fa fa-spinner fa-spin fa-pulse"></i>
<br><br>loading...
</ons-modal>
And finally, you can call show/hide Spinner in your controller as follows:
app.controller('Controller', ['$rootScope', '$scope', 'service', function($rootScope, $scope, service) {
service.showSpinner(); //show
service.hideSpinner(); //hide
service.showSpinnerAuto(); //show and then hide automatically
}]);
Hope this help!
I am using angular-modal-service to open a modal.
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
modal.close.then(function(result) {
if (result) {
// do something
}
});
});
}
After I open this modal, I want to call a function to close it from the main controller
$scope.closeLoader = function() {
// close the modal here
}
How can I do this?
You can assign the modal closing function to the $scope when the modal is completely loaded. I added a dummy function, that it won't execute undefined if the modal is closed, before it is ready. You can also skip that, if you can assure, that it won't be possible.
$scope.closeLoader = angular.noop;
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
$scope.closeLoader = modal.close;
});
};
Below is the code:
app.controller('MainController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
html
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
I'm getting a peculiar problem. I have a nested accordion and I need a button like Edit on every accordion. When the button is clicked, I need to call a different function. What I'm doing is on click of the edit button I'm trying to use $event.stopPropagation() which will stop accordion functionality. But this isn't happening when I pass $event.stopPropagation(). It is redirecting to some other URL.
I'm posting some of my huge code. If any further info is required please comment.
HTML
<accordion-heading>
{{course.className}}
<button type="button"
ng-show="course.classId!=$scope.null"
class="pull-right btn btn-default btn-sm"
ng-click="editCourse(course,$event)">
Edit Course
</button>
</accordion-heading>
JS
$scope.editCourse = function(course, ev) {
ev.stopPropagation();
course.courseEditPermission = true;
}
app.js
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'modules/authentication/views/login.html',
hideMenus: true
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html'
})
.otherwise({
redirectTo: '/xyz'
});
}])
I don't know why it is redirecting but in my JS I provided routes, so I think event.stopPropagation is getting some anonymous URL, so it is redirecting to "/xyz" as I have mentioned.
You need to add event.preventDefault() handler like this:
$scope.editCourse = function(course, ev) {
ev.preventDefault();
ev.stopPropagation();
course.courseEditPermission = true;
}
I have three different controllers and views
From Screen when button is clicked Modal1 opens
$modal.open({
templateUrl: 'abc.html',
controller: 'abcCtrl',
size: 'lg',
scope: $scope,
});
In modal1 there is next button so on Click of Next Button Want to close Modal1 and open Modal2
$scope.validate = function(isValid) {
if (!isValid) {
$scope.errors = 'Please fill-up required fields';
} else {
$scope.errors = '';
$modal.open({
templateUrl: 'Payment.html',
controller: 'PaymentCtrl',
size: 'lg',
scope: $scope,
});
}
};
In modal2 there is next button so on Click of Next Button Want to close Modal2 and open Modal3
$scope.placeOrder = function() {
$scope.cart.abc().then(function(result) {
$modal.open({
templateUrl: 'orderSummary.html',
controller: 'SummaryCtrl',
size: 'lg',
scope: $scope,
resolve: {
items: function() {
return result.data;
}
}
});
},
function(err) {
//error msg
});
};
If I add $modalInstance.close to Modal1
while Opening another modal that is Modal2, Modal1 is Closed and Modal2 is Opened But none of the buttons work. Modal3 doesnt get opened Don't Know the actual issue what is happening.
Please help me. Thanks in advance.
it seems like you are looking for wizard...
have a look here
From Main Controller First Open Your Modal1,on Close of Modal1 i.e
var modalInstance = $modal.open({
templateUrl: 'abc',
controller: 'abcCtrl',
size: 'lg',
scope: $scope,
});
modalInstance.result.then(function(result) {
$scope.def();
}, function(err) {
//
});
$scope.def = function(){
//open another
}
call another function and in that function open another modal and similarly you can do.