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');
};
});
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 am using Angular based UI grid. I want to show another grid on row right-click. The the ID field of the row is to be passed to DB using http.post. The returned data to be displayed in another grid in modal. Here is what I am doing
rowTemplate :
rowTemplate: '....'
appScopeProvider:
appScopeProvider: $scope.myAppScopeProvider,
$scope.myAppScopeProvider = {
showMenu: function (row) {
var modalInstance = $modal.open({
controller: 'ContextController',
templateUrl: 'ngTemplate/ContextMenu.html',
resolve: {
selectedRow: function () {
//getTable(row.entity);
return row.entity;
}
}
});
modalInstance.result.then(function (selectedItem) {
console.log('modal selected Row: ' + selectedItem);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
},
app.controller('ContextController',
['$scope', '$modal', '$modalInstance', '$filter', '$interval','$http' , 'selectedRow',
function ($scope, $modal, $modalInstance, $filter, $interval, $http, selectedRow) {
$scope.selectedRow = selectedRow;
$scope.rel_details = function () {
$scope.nodeName_rel = selectedRow.NodeName;
$scope.fromTime_rel = "2015-11-11";
$scope.toTime_rel = "2016-12-21";
$http.post('../getData', { nodeName: $scope.nodeName_rel, trapType: 'All', startTime: $scope.fromTime_rel, endTime: $scope.toTime_rel })
.success(function (data) {
console.log(data);
$scope.gridOptions1.data = data;
});
//$scope.selectedRow = null;
//$modalInstance.close();
};
ContextMenu.html :
<script type="text/ng-template" id="ngTemplate/ContextMenu.html">
<div class="modal-header">
<h4>Context Menu</h4>
</div>
<div class="modal-body">
<button class="btn btn-primary btnCustom" ng- click="rel_details()">Grouped Details</button>
<div id="grid_rel" ui-grid="gridOptions1" class="grid"></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary btnCustom" ng-click="ok()">OK</button>
<!--<button class="btn btn-primary btnCustom" ng- click="cancel()">Cancel</button>-->
</div>
</script>
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.
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
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>).