I have a strange issue where simply injecting the $modal service into my application results in strange behavior from an ngGrid instance -- the ngCanvas (and contained rows) seems to think it should be 100px shorter than the containing element.
My question is: When the $modal service is injected, does it immediately interact with the DOM in any way? I assume the answer is yes, but I wasn't able to suss it out of the source.
Edit: Using angular-bootstrap 0.7.0, angular 1.2.7
An example of how I'm using the $modal and $modalInstance:
This lives in the main controller to prep the $modal:
var modalOptions = {
dialogClass: 'modal admin-modal admin',
dialogFade: true,
backdropFade: true,
keyboard: true,
scope: $scope
};
$scope.unlockAccounts = function() {
var options = _.extend(modalOptions, {
templateUrl: '/admin/generic_users_modal.tpl.html',
controller: 'AccountUnlockModalController'
});
$modal.open(options).result.then(function(res) {
if(res) {
while($scope.selectedUsers.length) {
$scope.selectedUsers.pop();
}
}
});
};
This is the modal controller:
module.controller('AccountUnlockModalController', ['$scope', '$modalInstance', 'UserAPI', '$log', function($scope, $modalInstance, UserAPI, $log) {
$scope.templateConfig = {
description: 'unlock',
buttonText: 'Unlock accounts',
userPlurality: function() {
return $scope.selectedUsers && $scope.selectedUsers.length > 1 ? 'these accounts' : 'this account';
}
};
$scope.closeModal = function() {
// passing through false to clarify that no deselection should take place
$modalInstance.close(false);
};
$scope.modalFunction = function() {
var errs = [];
_.each($scope.selectedUsers, function(user) {
UserAPI.unlockAccount(user.email).then(function(res) {
if(res.status !== 200) {
errs.push(res);
}
})
});
if(errs.length) console.warn(errs);
// passing through false to clarify that users should be deselected
$modalInstance.close(true);
};
}]);
If there's anything else you'd like to see, I'm happy to work it up. Thanks!