I use uibmodal in one of my controller, and managed to pass data to the modal controller.
However, once the data has been passed in my modal controller, I can't figure out how to get this data rendered in the modal template.
My main controller:
doEdit = function () {
var modalScope = $scope.$new(false);
modalScope.roleModel = self.gridApiRoles.selection.getSelectedRows()[0];
var modalInstance = $uibModal.open({
templateUrl: 'views/dialog.html',
scope: modalScope,
windowTemplateUrl: 'template/flexModal.html',
backdrop: 'static',
resolve: {
roleModelScope: function () {
return modalScope.roleModel;
}
},
controller: ['$scope', '$rootScope', 'roleModelScope', DialogEditController],
controllerAs: 'ctrl'
});
modalScope.modalInstance = modalInstance;
modalInstance.result.then(
function close(result) {
console.info(result);
},
function dismiss() {
console.info("dialog dismissed");
}
);
}
};
My UibModal controller:
let DialogEditController = function ($scope, $rootScope, roleModelScope) {
let self = this;
self.$onInit = () => {
initTest();
};
let initTest = () => {
console.log(roleModelScope.name);
};
};
At this point, roleModelScope.name has been perfectly passed to the modal controller.
My template:
<div class="modal-dialog" style="width:900px; height:750">
<div class="modal-content">
<div class="modal-header bg-info">
</div>
<div class="modal-body">
{{roleModelScope.name}}
</div>
<div class="modal-footer">
</div>
</div>
</div>
I tried to use ctrl.roleModelScope but it didn't work neither.
Thank you for your answers.
Assign a roleModelScope value inside controller this(context), so that it will be available for binding on view.
Also your Modal controller alias is ctrl, use {{ctrl.roleModelScope.name}} inspite of {{roleModelScope.name}}.
<div class="modal-body">
{{ctrl.roleModelScope.name}}
</div>
Code
let initTest = () => {
this.roleModelScope = roleModelScope;
console.log(roleModelScope.name);
};
Related
I have this function inside my controller to which I send a series of data that I receive as parameters correctly.
$scope.changeValues = function(measure,name,valCol) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: 'static',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.ok = function(){
$scope.myVar = "hello";
console.log($scope.myVar);
modalInstance.close();
}
}
});};
I want to change the value of the $scope.myVar variable in my $modal.window, but these changes are not saved. Where is the error?
<div class="reducedfont" ng-init="loadCtrl()">
<script type="text/ng-template" id="myModalContent.html">
<!-- template for modal -->
<div class="modal-header">
<h3 class="modal-title">{{valueName}}</h3>
</div>
<div class="modal-body">
</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>
<p>{{myVar}}</p>
if you want to change the
$scope.changeValues = function(measure,name,valCol) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: 'static',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.ok = function(){
$scope.myVar = "hello";
console.log($scope.myVar);
$modalInstance.close($scope.myVar);
}
}
})//end of $model
modalInstance.result.then(function (SelectedItem) {
setTimeout(function () {
//SelectedItem is the value return from modal controller on close and $scope.myVar is the variable in the controller where $scope.changeValues function is defined.
$scope.myVar= SelectedItem;
}, 500);
});
};//end of function
Ok, you are doing well but in a wrong way.
If you want to keep the updated value you have to set it as an object property value.
Working with string (or in general with primitives type) breaks the object reference between your scopes.
Try with:
controller: function($scope) {
$scope.ok = function(){
$scope.myVar.value = "hello";
console.log($scope.myVar);
modalInstance.close();
}
}
When you will be out of your modal (and when its scope is destroyed) your $scope.myVar will keeping that property value with the update.
I am working on angular application where I am displaying pop up message using bootstrap modal.
but its not displaying dynamic header text and body text.Pop up is showing but with blank header and body.
my main controller is as below
var requestUserController = function ($scope, $window, $uibModal, DataService) {
$scope.modalOptions = {
headerText: "",
bodyText: ""
}
var onServerError = function (data) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = data.statusText;
var serverModel = $uibModal.open({
templateUrl: window.serverUrl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'requestUserController',
scope: $scope
});
$scope.cancelForm = function () {
serverModel.close();
};
};
var onClientDataComplete = function (data) {
//window.hideProgress();
$scope.requestUser.clientDrp = data;
$scope.clientSelected = $scope.requestUser.clientDrp[0];
};
//window.showProgress();
DataService.getListofClients()
.then(onClientDataComplete, onServerError);
}
App.controller("requestUserController", ["$scope", "$window", "$uibModal", "DataService", requestUserController]);
and html for modal is
<div class="modal-header" ng-class="{true: 'alert-success', false: 'alert-danger'}[modalOptions.headerText == 'Success']">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn icn-ok" value="Ok"
ng-click="cancelForm()" />
</div>
But pop up is showing blank header and body text
Remove loading of 'requestUserController' from your code and use the following code for open popup window
var serverModel = $uibModal.open({
templateUrl: window.serverUrl + 'app/ErrorMessages/PopUpErrorMessage.html',
scope: $scope
});
I'm using Angular 1.4.1 and UI Bootstrap 0.13.
I have a directive from which I'm opening a modal. The modal opens fine, but the buttons seemingly don't get bound to their handlers - they don't do anything. I've used this same code in another project just fine, except not from within a directive.
My directive:
(function () {
var app = angular.module('myApp');
app.directive('someDirective', function () {
return {
restrict: 'E',
templateUrl: 'SomeDirective.html',
scope: {
list1: '=list1',
list2: '=list2',
save: '&'
},
controller: ['$scope','$modal','myService', function ($scope,$modal,myService) {
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'ModalTemplate.html',
controller: 'modalController',
backdrop: 'static',
size: 'sm',
resolve: {
saveData: function () {
//do save action
}
}
});
modalInstance.result.then(
function (itemToSave) {
//save item
},
function () {
//Cancel
}
);
};
}]
}
});
}());
The modal's controller:
(function() {
var app = angular.module('myApp');
app.controller('modalController', [
'$scope', '$modalInstance', 'saveData',
function($scope, $modalInstance, saveData) {
$scope.saveData = saveData;
$scope.save = function() {
$modalInstance.close($scope.saveData);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]);
}());
And the template for the modal content:
<div class="modal-header bg-info">
<h3 class="modal-title">Add New Record</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form"></form>
</div>
<div class="modal-footer bg-info">
<button class="btn btn-primary" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
My thought is that I'm having issues with scope, but I can't track it down. I have put break points on modalController. The app.controller() call happens when the app loads, I've seen that. But breakpoints within save() and cancel() never get hit.
Can someone help me figure out why the modal's buttons don't do anything?
This turned out to be a stupid mistake. At some point I apparently overwrote the name of one of the other controllers in my project with the same name of the controller I was using for the modal. The other controller did not have save() or cancel() methods so nothing was happening. As soon as I fixed my error and all controllers once again had their proper names this started working again.
I am using angular-ui. I am trying to reduce html coding my making reusable elements with angular directives. I'm definitely missing something. What I want to do is this:
<modal modal-title="Some Title" button-text="Click Me">Modal Content</modal>
And I want that to output the modal and button so instead of adding all that markup over and over for the modal I can just use this custom element. It seems to be working except that I can not for the life of me figure out how to get the content inside of the element. Here's the basics of what I'm doing:
angular.module('app').directive('modal', function () {
return {
templateUrl: 'partials/modal.html',
restrict: 'E',
controller: 'modalController',
controllerAs: 'mCtrl',
transclude: true,
link: function postLink(scope, element, attrs) {
scope.buttonText = attrs.buttonText;
scope.modalTitle = attrs.modalTitle;
}
};
}).controller('modalController', function($scope,$modal,$attrs) {
var _this = this;
this.buttonText = $attrs.buttonText;
this.modalTitle = $attrs.modalTitle;
this.open = function () {
var modalInstance = $modal.open({
templateUrl: 'modal-content.html',
controller: 'ModalInstanceCtrl',
controllerAs: 'miCtrl',
resolve: {
modalTitle: function() { return _this.modalTitle; }
}
});
modalInstance.result.then(function (selectedItem) {
//something
}, function () {
console.info('Modal dismissed at: ' + new Date());
});
};
this.save = function() {
//something
};
}).controller('ModalInstanceCtrl', function ($scope, $modalInstance, modalTitle) {
this.modalValue = 1;
this.modalTitle = modalTitle;
this.ok = function () {
$modalInstance.close(this.modalValue);
};
this.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Here's the template (partials/modal.html)
<script type="text/ng-template" id="modal-content.html">
<div class="modal-header">
<h3 class="modal-title">{{miCtrl.modalTitle}}</h3>
</div>
<div class="modal-body"> {{ mCtrl.content }} </div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="miCtrl.ok()">OK</button>
<button class="btn btn-warning" ng-click="miCtrl.cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="mCtrl.open()">{{mCtrl.buttonText}}</button>
How do I get the content of the element into mCtrl.content? The rest of it works as expected, I'm just missing something. Thanks!
Edit: It seems I need to use transclusion, so this is what I want to do:
<div class="modal-body"><ng-transclude></ng-transclude></div>
But I get this kind of error when I open up the modal:
[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <ng-transclude>
I'm using angular bootstrap modal.
termsText is populated and the scope.productTerms does contain a value. But for some reason when I output {{ productTerms }} inside the modal the value is not being displayed. Why?
js
$scope.openProductTerms = function (termsText) {
$scope.productTerms = termsText <-- has a value in console.log()
var modalInstance = $modal.open({
templateUrl: 'myModalTerms.html',
controller: ModalInstanceCtrl
});
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.dismiss('OK');
};
};
html
{{ productTerms }} < ==== value shows outside modal
<script type="text/ng-template" id="myModalTerms.html">
<div class="modal-body">
{{ productTerms }} <==== same value does not show insdie modal?
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
</script>
The modal has a new controller and therefore a new scope.
services.js
angular.module('services',[]).
factory('sharedService', function($rootScope) {
var sharedService = {};
sharedService.value = null;
sharedService.prepForBroadcast = function(value) {
this.value = value;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('shared');
};
return sharedService;
});
controller.js
$scope.openProductTerms = function (termsText) {
sharedService.prepForBroadcast(termsText);
var modalInstance = $modal.open({
templateUrl: 'myModalTerms.html',
controller: ModalInstanceCtrl
});
lastController.js
var ModalInstanceCtrl = function ($scope, $modalInstance,sharedService) {
$scope.$on('shared', function() {
$scope.productTerms = sharedService.value;
});
$scope.ok = function () {
$modalInstance.dismiss('OK');
};
};
Try using {{$parent.productTerms}} within your HTML
From my experience, it seems that the angular bootstrap modal creates a new scope. So by referencing $parent first, you'll be able to get your model's value.