In angular code, I have a code which validates when $locationChangeStart fired. I have to call event.preventDefault() to cancel it and display a bootstrap modal. However I have to click twice with modal buttons to take effect each buttons action. Below is the code:
$scope.$on('$locationChangeStart', function (event, next, current) {
if (skipValidation.skipAllowed($scope.filteredQuestions[0])) {
//some code here
}
else {
event.preventDefault();
skipValidation.openModal();
}
});
openModal() function...
this.openModal = function (size, locationChange) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'skipModalContent.html',
controller: 'SkipModalInstance',
size: size,
resolve: {
}
});
modalInstance.result.then(function () {
//$log.info('continue');
}, function () {
});
};
skipModalContent.html
<script type="text/ng-template" id="skipModalContent.html">
<div class="modal-header">
<h3 class="modal-title text-warning">Warnung!</h3>
</div>
<div class="modal-body">
Frage ist erforderlich, zu beantworten.
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="continue()">mache trotzdem weiter</button>
<button class="btn btn-default" type="button" ng-click="cancel()">schließen</button>
</div>
</script>
skipModalInstance controller...
var skipModalInstanceCtrl = function ($scope, $uibModalInstance, $window) {
$scope.continue = function () {
$uibModalInstance.close();
$window.skipModal = true;
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
$window.skipModal = false;
};
};
app.controller('SkipModalInstance', skipModalInstanceCtrl);
Your help is highly appreciated.
I finally found the problem. The $locationChangeStart was called twice so two modal was opened.
Related
I know there are numerous threads on this issue, but I have tried to follow solutions provided but am having no success.
The one I followed which resolved the error Unknown provider: $uibModalInstanceProvider, was the answer from #GeorgeKach in Unknown provider: $uibModalInstanceProvider - Bootstrap UI modal. The error has been removed and the modal opens, but my dismissal/close methods aren't invoking.
vm.open = function() {
console.log('open') //invokes
var modalInstance = $uibModal.open({
templateUrl: 'p3sweb/app/components/app/views/modalTemplate.html',
appendTo: undefined,
controller: function($uibModalInstance ,$scope){
vm.ok = function () {
console.log('ok') //fails
$uibModalInstance.close();
};
vm.cancel = function () {
console.log('close') //fails
$uibModalInstance.dismiss('cancel');
};
}
})
modalInstance.result.then(function() {
//resolved
}, function() {
//rejected
})
}
Question
Why are my ok and cancel methods not invoking? Rather than providing a work around, can someone explain why they aren't invoking?
Template
<div class="modal-header d-flex flex-column align-items-center justify-content-center">
<i class="fa fa-warning fa-3x"></i>
<p class="h4 txt-phase-red">Remove Patent</p>
</div>
<div class="modal-body d-flex flex-column align-items-center justify-content-center">
<p class="font-body">Are you sure you want to remove patent application xxxxxxxxxx?</p>
</div>
<div class="modal-footer">
<button class="btn btn--lg font-body font-body--component bg-phase-red txt-white" ng-click="$ctrl.cancel()">No</button>
<button class="btn btn--lg font-body font-body--component bg-phase-green txt-white" ng-click="$ctrl.ok()">Yes</button>
</div>
You should you controllerAs, and set it to vm
controllerAs (Type: string, Example: ctrl) - An alternative to the controller-as syntax. Requires the controller option to be provided as well.
var modalInstance = $uibModal.open({
templateUrl: 'p3sweb/app/components/app/views/modalTemplate.html',
appendTo: undefined,
controllerAs: 'vm',
controller: function($uibModalInstance){
var vm = this;
vm.ok = function () {
console.log('ok') //fails
$uibModalInstance.close();
};
vm.cancel = function () {
console.log('close') //fails
$uibModalInstance.dismiss('cancel');
};
}
})
Of course you can avoid using these kind of simple controllers by utilizing $close(result) and $dismiss(result) inside the template
<button class="btn btn-lg font-body font-body--component bg-phase-red txt-white" ng-click="$dismiss('cancel')">No</button>
<button class="btn btn-lg font-body font-body--component bg-phase-green txt-white" ng-click="$close('ok')">Yes</button>
For your concept use $scope instead vm or add attribute controllerAs
Change vm to $scope:
$scope.ok = function () {
console.log('ok') //fails
$uibModalInstance.close();
};
$scope.cancel = function () {
console.log('close') //fails
$uibModalInstance.dismiss('cancel');
};
or:
var modalInstance = $uibModal.open({
templateUrl: 'p3sweb/app/components/app/views/modalTemplate.html',
appendTo: undefined,
controllerAs: 'vm', <--- add
controller: function($uibModalInstance ,$scope){
vm.ok = function () {
console.log('ok') //fails
$uibModalInstance.close();
};
vm.cancel = function () {
console.log('close') //fails
$uibModalInstance.dismiss('cancel');
};
}
})
I have a model controller like such:
pcApp.controller("ModalInstanceController", function ($scope, $modalInstance, model) {
$scope.claim = model;
$scope.payNow = function () {
$modalInstance.close("now");
};
$scope.refuse = function () {
$modalInstance.close("later");
};
$scope.payLater = function () {
$modalInstance.dismiss("cancel");
};
});
The modal template is:
<script type="text/ng-template" id="newClaimPopup.html">
<div class="modal-header">
<h3 class="desktop">PayCaddy Claim</h3>
</div>
<div class="modal-body">
<p>{{claim.SenderFullName}} is claiming an amount of R{{claim.Amount}} for a golfing bet with him that you lost, with the message:</p>
<br />
<p>{{claim.Description}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="payNow()">Yes</button>
<button class="btn btn-danger" type="button" ng-click="refuse()">Refuse</button>
<button class="btn btn-warning" type="button" ng-click="payLater()">Later</button>
</div>
</script>
This is in a partial view included in _Layout.cshtml:
<div id="claim-notice-template">
#Html.Partial("_NewClaimPopupTemplate")
</div>
I show the modal using this code:
$scope.showNewClaimPopup = function (viewModel) {
$scope.claim = viewModel;
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: "newClaimPopup.html",
controller: "ModalInstanceController",
size: "sm",
resolve: {
model: function () {
return $scope.claim;
}
}
});
modalInstance.result.then(function () {
debugger;
$log.info("Modal accepted at: " + new Date());
}, function () {
$log.info("Modal dismissed at: " + new Date());
});
};
The viewModel parameter passed in to $scope.showNewClaimPopup is valid and fully populated. The resolve option for open is also working, because in ModalInstanceController I can see that the model parameter is the same valid viewmodel. Yet when the modal displays, the binding templates are all blank.
All code shown is in one MainController assigned to a div that surrounds everything, including the partial containing the modal template.
Why is the template not binding as expected?
You need to pass $scope to be used to compile modal template:
var modalInstance = $modal.open({
scope: $scope, // <--- this line is necessary
animation: $scope.animationsEnabled,
templateUrl: "newClaimPopup.html",
controller: "ModalInstanceController",
size: "sm",
resolve: {
model: function () {
return $scope.claim;
}
}
});
If you don't provide scope config then modal will create new child scope of the $rootScope, which obviously doesn't contain claim object.
I have a page which opens a modal that asks for user confirmation when making an edit to something on the page. If the user chooses "Cancel" button in the modal, the modal closes fine, but then refuses to re-open with the same link. The following error gets thrown if the modal link is clicked again:
TypeError: fn is not a function
at $parseFunctionCall (https://localhost:44310/js/angular.js:12346:15)
at ngEventDirectives.(anonymous function).compile.element.on.callback (https://localhost:44310/js/angular.js:21438:17)
at Scope.$get.Scope.$eval (https://localhost:44310/js/angular.js:14401:28)
at Scope.$get.Scope.$apply (https://localhost:44310/js/angular.js:14500:23)
at HTMLAnchorElement.<anonymous> (https://localhost:44310/js/angular.js:21443:23)
at HTMLAnchorElement.n.event.dispatch (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js:3:6466)
at HTMLAnchorElement.n.event.add.r.handle (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js:3:3241)
Here is the controller for the modal, very simple:
(function (angular, undefined) {
"use strict";
angular
.module("app.edit")
.controller("App.EditController", [
"$modalInstance", "$scope", "editList",
function ($modalInstance, $scope, editList) {
$scope.thingsToEdit = editList;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
}
]);
})(angular);
The editList is used to display a list in the confirmation modal, the html of the page.
And the HTML for the modal is:
<div class="modal-header">
<h3>Edit</h3>
</div>
<div class="modal-body">
<p>Please confirm the following edits: </p>
<ul>
<li ng-repeat="thing in thingsToEdit">{{thing}}</li>
</ul>
</div>
<div class="modal-footer">
<div class="form">
<div class="form-group">
<button class="btn btn-primary" type="submit" ng-click="ok()">Confirm Edit</button>
<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
And in the JavaScript for the original page that opens the modal is:
$scope.edit = function (things) {
$scope.editList = things;
$scope.thingsToEdit = things;
var editModal = $modal.open({
animation: true,
templateUrl: "edit.html",
controller: "App.EditController",
resolve: {
editList: function () {
return $scope.thingsToEdit;
}
}
});
editModal.result.then(function () {
var editUrl = //a valid url
$http.post(editUrl, { cache: true })
.success(function () {
console.log("edit successful");
})
.error(function () {
console.log("edit failed");
})
}, function() {
console.log("edit canceled");
});
};
I am using Twitter-Bootstrap Modal. I set a close icon on Modal header. I need to active this icon to close the Modal.
<div class="modal-content json-modal-body" id="full-width" ng-controller="projectdetailsController" close="CloseModal()">
<div class="modal-header modal-header-confirm">
<h4 class="modal-title ng-binding">
<span class="glyphicon glyphicon-indent-left"></span>{{modalOptions.headerText}}
<a type="button" title="Close" data-dismiss="modal"><i ng-click="CloseModal()" class="glyphicon glyphicon-remove icon-arrow-right pull-right"></i></a>
</h4>
</div>
<div class="modal-body">
<pre class="Modal-pre" ng-bind-html="modalOptions.bodyText"></pre>
</div>
</div>
Controller:
var modalInstance=$scope.showJSON = function(){
var modalOptions = {
headerText: ' JSON Schema View',
bodyText: 'jsonSchema'
};
var modalDefaults = {
templateUrl: 'app/partials/jsonModal.html'
};
modalService.showModal(modalDefaults, modalOptions).then(function (result) {
});
}
$scope.CloseModal = function () {
$modalInstance.close();
}
I am using ng-click="CloseModal()" to close the modal. I also declared close="CloseModal()" on the parent div. How can I solve this?
I have an AngularJs controller for this modal. Can I use the controller?
You have to declare the function CloseModal() in your controller
If you use angular-ui bootstrap it should look like this:
['$scope', '$modalInstance', function($scope, $modalInstance){
...
$scope.CloseModal = function () {
$modalInstance.close();
}
Follow these steps:
var app = angular.module('myApp',['ui.bootstrap']);
//controller for modal
app.controller('modalCtrl',['$scope','$modalInstance', function ($scope,$modalInstance) {
'use strict';
$scope.cancel = function () {
$modalInstance.dismiss();
};
Second controller:
app.controller('Ctrl',['$scope','$modal', function ($scope,$modal) {
$scope.openModal= function () {
$modal.open({
backdrop: true,
keyboard: false,
backdropClick: false,
templateUrl: "path of your modal HTML",
dialogClass: "modal-content",
controller: 'modalCtrl',
});
}
I want to delete a record after pressing Ok on Modal Dialog in angularjs. It delete the item but not removing form $scope. I user $index in my html file. Can any one help me?? I am struck :(
My html file:
<script type="text/ng-template" id="admin.html">
<div class="modal-header">
<h3 class="modal-title">Are you Sure?</h3>
</div>
<div class="modal-body">
Are you sure??
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button ng-click="open($index)">Open me!</button>
JS file:
$scope.open = function (user) {
var modalInstance = $modal.open({
templateUrl: 'admin.html',
controller: 'ModalInstanceCtrl',
windowClass: 'app-modal-window',
resolve: {
userIndex: function () {
return user
},
users: function () {
return $scope.users
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
};
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, users, userIndex, services) {
$scope.users = users;
$scope.selected = {
user: $scope.users[userIndex]
};
$scope.ok = function () {
services.deleteCustomer($scope.selected.user.id);
$scope.users.splice(userIndex, 1);
$modalInstance.close($scope.selected.user);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});