$uibModal - dismiss failing to invoke - javascript

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');
};
}
})

Related

Angular Modal not binding to scope properties

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.

Call Modal functions in Controller - AngularJS

I have a project where I'm using the ui.bootstrap, and according to the tutorial I followed I have to set it up similar to this:
'use strict';
angular.module('academiaUnitateApp')
.controller('EntryCtrl', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalCtrl'
})
};
});
'use strict';
angular.module('academiaUnitateApp')
.controller('ModalCtrl', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.delete = function () {
$modalInstance.dismiss('cancel');
};
});
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<p class="alert alert-danger">
WARNING: By deleting the article all it's nested articles will be moved to the article holding this one.
<br/>
Do you still want to delete this article?
</p>
<button class="btn btn-primary" ng-click="delete()">Yes</button>
<button class="btn btn-primary" ng-click="cancel()">No</button>
<span ng-show="error.state" class="alert alert-danger">{{ error.message }}</span>
<span ng-show="done.state" class="alert alert-success">{{done.message}}</span>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
This works find and all, but what if I want to move the $scope.delete function inside the EntryCtrl controller instead of having it in a separate controller?
You can pass in anonymous controller. That would allow you to have all the logic in a single file.
In your case it would look like this:
'use strict';
angular.module('academiaUnitateApp')
.controller('EntryCtrl', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: [
'$scope', '$modalInstance', function($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.delete = function () {
$modalInstance.dismiss('cancel');
};
}
]
})
};
});
EDIT
You can pass variables by defining resolve function and adding variables in inner controller definition. I have used this to pass values in one-way fashion but never for two-way binding. I think you should be able to pass outer scope as well.
I don't know if it works, so be warned! :)
'use strict';
angular.module('academiaUnitateApp')
.controller('EntryCtrl', function ($scope, $modal) {
$scope.myValue = 'foobar';
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: [
'$scope', '$modalInstance', 'outerScope', function($scope, $modalInstance, outerScope) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.delete = function () {
$modalInstance.dismiss('cancel');
};
}
],
resolve: {
outerScope: function() {
return $scope;
}
}
})
};
});
PS. Haven't tested code above, just put it together from your provided code
For more details see my answer here:
https://stackoverflow.com/a/29461685/3070052

Close icon doesn't work on Bootstrap Modal using AngularJs

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',
});
}

Directive template not rendering on modal input

I have an angular-bootstrap modal that I have created a custom directive for so that the input field will autofocus on open. I have added the directive template to my input tag, but on inspect element, it's nowhere to be seen. Code:
Directive (copied from: How to set focus on input field?)
'use strict';
angular.module('portfolioManager.directives', []).directive('focusMe', function($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
console.log('value=',value);
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
// to address #blesh's comment, set attribute value to 'false'
// on blur event:
element.bind('blur', function() {
console.log('blur');
scope.$apply(model.assign(scope, false));
});
}
};
});
HTML:
<div class='panel-heading report'>
<h1 class='port-title port-manager-header title custom-inline'>Portfolios</h1>
<div ng-controller="ModalCtrl" class='create-new-frame'>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">New Portfolio</h3>
</div>
<form name='eventForm'>
<div class="modal-body">
<input class='form-control' ng-model='portfolios.portName' placeholder='Portfolio name' ng-required='true' maxlength="35" focus-me="shouldBeOpen">
<span class="help-inline" ng-show="notUnique">Portfolio name already used</span>
<br>
<div ng-init="radioModel = 'Right'; portfolios.groupSelection = false" class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = true' btn-radio="'Left'">Group</label>
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = false' btn-radio="'Right'">Private</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(portfolios.portName)" ng-disabled="eventForm.$invalid || notUnique" id='portfolio-modal-create-button'>Create</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button class="btn btn-sm btn-primary create-new-frame-btn" ng-click="open('sm')">Create New</button>
</div>
</div>
ModalCtrl:
'use strict';
angular.module('portfolioManager').controller('ModalCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
You need to create the modal somehow in your code and trigger it to be displayed. You just defined the template, now you have to use it. See http://angular-ui.github.io/bootstrap/#/modal
Example from the docs:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
Use the templateUrl attribute to link to your modal template and create a trigger to call open from the UI (for instance: <span ng-click="open()">Open Modal</span>).

How to delete item after Modal dialog success in angularjs

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');
};
});

Categories

Resources