Develop Reference

Why is my page reloaded after model.close()?

I have the following problems:
1- When my model is open and I click 'cancel' to close it, it reloads the page.
2- When I click 'OK', my 'DELETE'-request is not sent to the server (it doesn't receive anything) and the page is reloaded. I'm also not redirected to the page I'm meant to go to.
HTML
<div>
<input type="button" class="btn btn-primary" ng-click="suppr()" value="ok"/>
<input type="button" class="btn btn-default" ng-click="annulSupp()" value="cancel" />
</div>
file js
(function() {
'use strict';
var progress = angular.module('demret.progress', ['ui.bootstrap.modal']);
progress.directive('progressDem', function() {
return {
restrict : 'E',
templateUrl : "progress/progress.html",
controller : [ '$scope', '$http', 'Demande', '$window', '$modal', function($scope, $http, Demande, $window, $modal) {
// TODO
$scope.supprimerDemande = function() {
var urlSetDem = cfg.urlDDRRest + 'demande/' + Demande.get().id;
var config = {
method : 'DELETE',
url : urlSetDem,
jsonExpected : true
};
$http(config).then(function(http) {
$window.location.href = cfg.urlPortail;
})['catch'](function(http) {
$scope.errT= 'Une erreur technique';
})['finally'](function() {
});
}
// ==========================================
// open fenetre modal
// ==========================================
$scope.modalSuppressionDem = function(size) {
// déclaration de la fenetre
var modalInstance = $modal.open({
animation : true,
templateUrl : 'progress/suppression-modal.html',
controller : 'ModalSuppressionDem',
size : size,
backdrop : 'static',
resolve : {
functionSupp : function() {
return $scope.supprimerDemande;
}
}
});
modalInstance.result.then(function() {
// close
});
};
} ]
}
});
// Controleur de la fenetre modale
progress.controller('ModalSuppressionDem', [ '$scope', '$modalInstance', 'functionSupp', function($scope, $modalInstance, functionSupp) {
$scope.suppr = function() {
functionSupp();
$modalInstance.close();
};
$scope.annulSupp = function() {
$modalInstance.close();
};
} ]);
})();
config.js
(function() {
'use strict';
window.cfg = {
urlDDRRest : '/TOTO-rs/api/',
urlPortail : '/TOTO/',
};
})();
Does anyone know why this happens?
Thank you in advance!

Try this:
replace
<input type="button" class="btn btn-default" ng-click="annulSupp()" value="cancel" />
with
<input type="button" class="btn btn-default" ng-click="annulSupp($event)" value="cancel" />
and replace $scope.annulSupp() function with below code
$scope.annulSupp = function(event) {
event.preventDefault();
$modalInstance.close();
};

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.

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

$dialog.messageBox equivalent

With Angular I used to be able to do this
var title = 'title';
var messageBody = 'message';
var buttons = [{ result: 'ok', label: 'OK', cssClass: 'btn-primary' }];
$dialog.messageBox(title, messageBody, buttons).open();
But now, $dialog has been replaced with $modal.
What is the equivalent of the above in the new scheme?

Using $modal:
Example HTML:
<div>
<div class="modal-header">
<h3 class="modal-title">{{data.title}}</h3>
</div>
<div class="modal-body">
{{data.message}}
</div>
<div class="modal-footer">
<button class="btn-primary" ng-click="ok()">Ok</button>
</div>
</div>
Example JS:
var MyModalCtrl = function ($scope, $modal) {
$scope.title = 'I'm a Modal';
$scope.message = 'Hello World';
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: '/path/to/html',
controller: MyModalInstanceCtrl,
size: 'lg',
resolve: {
data: function () {
return {title: $scope.title, message: $scope.message};
}
}
});
modalInstance.result.then(function (selectedItem) {
console.log('Closed');
});
};
var MyModalInstanceCtrl = function ($scope, $modalInstance, data) {
$scope.data = data;
$scope.ok = function () {
$modalInstance.close();
};
};
The documentation for this can be found here: http://angular-ui.github.io/bootstrap/