I have the following code
$scope.currentTask = undefined;
$scope.openModal = function (task, size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'homeController',
controllerAs: '$ctrl',
scope: $scope,
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $scope.items;
}
}
});
$rootScope.currentModal = modalInstance;
$rootScope.currentModal.result.then(function () {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
$scope.setTask = function(task) {
$scope.currentTask = task;
}
$scope.log = function (currentTask) {
console.log($scope.currentTask);
}
<div class="row" ng-init="processPages()">
<div class="panel panel-default col-xs-3" style="margin: 20px" ng-repeat = "list in pages[currentPage]">
<div class="panel panel-default">
<div class="panel-heading">
<h6 style = "float: right">({{list.tasks.length}})</h6>
<div class="panel-title">
<h4>{{list.name}}</h4>
</div>
</div>
</div>
<div class="panel-body">
<table class="table table-striped table-hover" ng-init = "tasks = list.tasks">
<tr ng-repeat="task in tasks">
<td ng-click="setTask(task); openModal(task);>
<h5>{{task.name}}</h5>
</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div ng-init="editEnabled = false">
<div class="modal-header" ng-init = "log(currentTask)">
<h3 class="modal-title" id="modal-title" ng-show = "!editEnabled">Not editing</h3>
<h3 class="modal-title" id="modal-title" ng-show = "editEnabled">Editing</h3>
</div>
<div class="modal-body" id="modal-body">
<div ng-show="!editEnabled">
</div>
<div ng-show="editEnabled">
</div>
</div>
<div class="modal-footer">
<button style = "float: left" class="btn btn-primary" type="button" ng-show = "!editEnabled" ng-click="editEnabled = true">Editar</button>
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
Here's how the page is working:
First we have a list of tasks and if we click on one task...
...we get a model
I'd like the task information to be passed to the model, but everytime I set the task on the $scope to be the task on the list, even though it happens before the model is opened the log function prints the currentTask is still undefined. I've tried to change the currentTask definition at the beggining to be something concrete, but what happens then is the log function prints what was defined at the beggining and not after the change is made.
The only solution I could find that worked was creating a different controller for the modal and sharing data between modalController and homeController via service. It's working fine, here's the service:
var app = angular.module('agendaApp');
app.service('sharedModalProperties', function() {
var task = undefined;
var activeModal = undefined;
return {
setCurrentTask : function (task) {
this.task = task;
},
getCurrentTask : function () {
return this.task;
},
setActiveModal : function (modal) {
this.modal = modal;
},
getActiveModal : function () {
return this.modal;
}
}
});
The task being undefined indicates the modal popup's ($scope) is not aware of any such model data. I assume its creating a fresh scope object, so your call to setTask() does not work as it is working on old scope. You can try calling during your modal display code.
$scope.openModal = function (task, size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'homeController',
controllerAs: '$ctrl',
scope: $scope,
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $scope.items;
}
}
});
$rootScope.currentModal = modalInstance;
$rootScope.currentModal.result.then(function () {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
}
//Add this code
$scope.currentTask = task;
//Or Call Set Task Here.
setTask(task);
);
}
From our discussion in the comments try something like this for your uibmodal's controller (See the git repo for the changes I made)
...
$scope.items = ["items1", "items2", "items3"];
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: size,
appendTo: parentElem,
resolve: {
modalItems: function() {
console.log("items to send to modal", $scope.items);
return $scope.items;
}
},
controller: ['$scope', 'modalItems', function($scope, modalItems) {
console.log("items sent to modal", modalItems);
$scope.modalItems = modalItems;
}]
});
...
HTML:
<script type="text/ng-template" id="myModalContent.html">
{{modalItems}} <!-- Should show the array of items -->
</script>
Related
I have a problem with AngularJS Controller "as" syntax. I am trying to use bootstrap nanomodals and attach to them controllers $scope.
For now, I create angular component for my modal. I create my dialog in html too.
My html code:
<body ng-app="application">
<div ng-controller="accountController as $acc" class="controller-account">
<script type="text/ng-template" id="loginModal.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Nowe konto</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="userNameInput">Nazwa użytkownika:</label>
<input type="text" class="form-control" id="userNameInput" placeholder="Wprowadź nazwę użytkownika">
</div>
<div class="form-group">
<label for="userPasswordInput">Hasło:</label>
<input type="password" class="form-control" id="userPasswordInput" placeholder="Password">
</div>
<div class="form-group">
<label for="userEmailInput">E-Mail:</label>
<input type="email" class="form-control" id="userEmailInput" placeholder="Wprowadź E-mail">
</div>
<button ng-click="$acc.okButton()" class="btn btn-primary">Załóż konto</button>
</form>
</div>
</script>
My JS script:
var angularApp = angular.module('application', ['ngAnimate', 'ngSanitize', 'ngCookies', 'ui.bootstrap']);
angularApp.component('loginModalComponent', {
templateUrl: 'loginModal.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: () => {
var $acc = this;
$acc.$onInit = () => {
};
$acc.okButton = () => {
console.log('Liiiii');
//HTTP request about login
};
$acc.closeButton = () => {
$acc.close();
}
}
});
angularApp.controller('accountController', ['$scope', '$http', '$cookies', '$uibModal',
function($scope, $http, $cookies, $uibModal){
var $acc = this;
$acc.isUserSignIn = false;
$acc.loginModalOpen = () => {
var modalInstance = $uibModal.open({
animation: true,
component: 'loginModalComponent',
resolve: {
}
});
};
}]);
I dont know why, but i cannot use in this example $acc.okButton() function.
I used this and this to resolve this problem, but i cannot do this. Something is bad here, but i dont know what.
You declared a component, but I can not see it in your html code.
So firstly you need to take the html of the modal and place it to file 'loginModal.html' and remove 'ng-controller' directive from it. So the code in that file should be like this:
Seems that you need to replace this:
<div ng-controller="accountController as $acc" class="controller-account">
with this:
<login-modal-component class="controller-account" />
In such case it will use your controller described in component declaration.
But also you will add controllerAs: '$acc' to your component, because by default it uses $ctrl.
So you also need to slightly change code like this:
angularApp.component('loginModalComponent', {
templateUrl: 'loginModal.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: () => {
var $acc = this;
$acc.$onInit = () => {
};
$acc.okButton = () => {
console.log('Liiiii');
};
$acc.closeButton = () => {
$acc.close();
}
},
controllerAs: '$acc' // ADD THIS LINE
});
I am new to Angular. I have created a component with a template (panel.html) and a controller (allPanelsRetrieved). When a specific button defined in the template is clicked, the showDetails() function specified in the controller is called. This function triggers the opening of a modal dialog specified by a template (panel-list.details-template.html) and a controller, which are both defined inside the allPanelsRetrieved controller. The problem is that the modal dialog is displayed but the controller doesn't work (the click of the OK button does nothing). Where the problem may be? Thanks in advance
angular.
module('panelList')
.component('panelList', {
templateUrl: '/panel-list/panel.html',
controller: ['Panel', 'NgTableParams','$scope', '$location', '$uibModal',
function PanelListController(Panel, NgTableParams, $scope, $location, $uibModal) {
this.allPanelsRetrieved = (index, before) => {
//..hidden code here
}
this.showDetails = function () {
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controller: function ($uibModalInstance) {
let $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
},
}).result.then(
function (success) {
alert(success);
},
function (error) {
alert(error);
}
);
};
}]
});
Here is the template panel-list.details-template.html:
<div>
<script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$ctrl.ok()">Close</button>
</div>
</script>
Use $scope to make it work in the AngularJS way. Here is a working plnkr demo of what you try to achieve.
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controller: function ($uibModalInstance, $scope) {
$scope.ok = function () {
$uibModalInstance.close();
};
}
}).result.then(
function (success) {
alert(success);
},
function (error) {
alert(error);
}
);
View
<script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Close</button>
</div>
</script>
While the angular.component implementation provides a default for the controllerAs syntax...
controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl',
...it appears that angular-ui-bootstrap does not.
Simply provide a value for controllerAs in your $uibModal options to continue using the preferred syntax.
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controllerAs: '$ctrl',
controller: function($uibModalInstance) {
let $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
}
}
http://plnkr.co/edit/q1arN18553XoUZEuPcPl?p=preview
The problem is with this keyword as you are using it. Use arrow function instead and it will work:
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controller: ($uibModalInstance) => {
let $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
},
})
I have a bootstrap modal which has a single ok and cancel button wired. What I need help with is I need a different instance of ok and cancel for every modal instance that is called.
Modal.html
<div ng-controller="dealerController">
<div class="modelstitle">
<div class="modal-header mdlheader">
<button type="button" class="close close-btn" ng-click="cancel()">×</button>
<h3 class="modal-title mdltitle" ng-model="modalTitle">{{modalTitle}}</h3>
</div>
<div class="modal-body mdlbody">
<p ng-model="modalContent">{{modalContent}}</p><br/>
</div>
<div class="modal-footer footerbtn">
<button class="btn btn-primary btnwarning" type="button" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary btnwarning" type="button" ng-click="ok()">OK</button>
</div>
</div>
Controller
var myApp=angular.module('home', ['ui.bootstrap']);
myApp.controller('ModalController',function($scope,$uibModal){
$scope.showModal = function(){
$scope.modalInstance = $uibModal.open({
animation: true,
templateUrl: 'modal.html',
//controller: 'ModalController',
size: 'sm',
scope: $scope,
// Prevent closing by clicking outside or escape button.
backdrop: 'static',
keyboard: false
});
}
$scope.ok = function(){
$scope.modalInstance.dismiss();
}
$scope.cancel = function() {
//alert("Cancel from main controller");
$scope.modalInstance.dismiss('cancel');
};
})
Plunker
Expected: I need a different ok and cancel implementation for every instance of a modal.
You could make your modal opening logic more generic and pass ok and cancel functions to it and use those in modal's controller.
<button ng-click="showSomeModal()">Modal 1</button>
<button ng-click="showOtherModal()">Modal 2</button>
angular.module('home', ['ui.bootstrap'])
.controller('ModalController',function($scope,$uibModal){
function openModal(ok, cancel) {
$uibModal.open({
animation: true,
templateUrl: 'modal.html',
size: 'sm',
backdrop: 'static',
keyboard: false,
controller: function($scope) {
$scope.ok = function() {
$scope.$close();
ok();
};
$scope.cancel = function() {
$scope.$dismiss();
cancel();
};
}
});
}
angular.extend($scope, {
modalTitle: 'I am a Title',
modalContent: 'I am model content',
showSomeModal: function() {
openModal(angular.noop, angular.noop);
},
showOtherModal: function() {
function ok() {
console.log('ok');
}
function cancel() {
console.log('cancel');
}
openModal(ok, cancel);
}
});
});
Related plunker here https://plnkr.co/edit/6ecoHA
Or instead of using controller, you could use those same functions after modal is closed/dismissed, using modal result.
function openModal(ok, cancel) {
$uibModal.open({
// remove controller altogether
...
})
.result
.then(ok) // closed
.catch(cancel); // dismissed
}
// changes in modal template
<button type="button" ng-click="$close()">OK</button>
<button type="button" ng-click="$dismiss()">Cancel</button>
You can try add extra parametr to you modal instance that will identity your actual opened modal. Then in ok and cancel function do if statement.
var myApp=angular.module('home', ['ui.bootstrap']);
myApp.controller('ModalController',function($scope,$uibModal){
$scope.showModal = function(modalId){
$scope.modalInstance = $uibModal.open({
animation: true,
templateUrl: 'modal.html',
//controller: 'ModalController',
size: 'sm',
scope: $scope,
// Prevent closing by clicking outside or escape button.
backdrop: 'static',
keyboard: false,
});
$scope.modalInstance.modalNameProperty = modalId ;
}
$scope.ok = function(){
if( $scope.modalInstance.modalNameProperty == somename){
//do somethink
}
else if($scope.modalInstance.modalNameProperty == somename)
{
// do other staff
}
$scope.modalInstance.dismiss();
}
The same in cancel function.
I am using angularjs. I am trying to send parameters and object into the popup.
Click here:
Html code:
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<div class="container" ng-app="app" ng-controller="Controller">
<h3>Angular Modal Service</h3>
<a class="btn btn-default" href ng-click="show()">Show a Modal</a>
<p>{{message}}</p>
<!-- The actual modal template, just a bit o bootstrap -->
<script type="text/ng-template" id="modal.html">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Yes ossssssssr No?</h4>
</div>
<div class="modal-body">
<p>It's your call...</p>
</div>
<div class="modal-footer">
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</script>
</div>
Js Code:
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, ModalService) {
$scope.url = 'google.com';
var obj= {};
obj.name = "test"
$scope.data = obj;
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = "You said " + result;
});
});
};
});
app.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
How to pass the scope url and data values into the popup.
I saw few example to pass using resolve.
Please check my example
try this:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () {
return $scope.data
}
}
})
in model controller you can get data like
app.controller('ModalController', function($scope, close, data) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
Call broadcast with data to Your modal, and catch event:
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, $rootScope, ModalService) {
$scope.url = 'google.com';
var obj= {};
obj.name = "test"
$scope.data = obj;
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$rootScope.$broadcast('ModalController:set', {message: "You said " + result});
});
});
};
});
app.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
$scope.$on('ModalController:set', function(event, data) {
for(var i in data) {
$scope[i] = data[i];
}
});
});
"showModal" has a property with name "resolve".It lets you to share (pass) parameters to the controller.For example:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () { // ro you can pass a value in stead of function
return $scope.data
}
}
})
And in controller you can inject it like services or use it with scope like scope.data
i have some directive:
.directive("modal", [function(){
var controller = function($scope, $attrs, $element, $uibModal){
var defaultOptions = {
title: "Modal title",
content: "Modal body"
},
userOptions = {
title: $attrs.title,
content: $attrs.content,
templateUrl: $attrs.templateUrl,
templateController: $attrs.templateController
};
options = angular.extend({},defaultOptions, userOptions || {});
$element.on($scope.event, function(){
$uibModal.open({
templateUrl: defaultTemplate,
controller: "DefaultModalController",
resolve: {
options: function () {
return options
}
}
});
});
},
defaultTemplate = "templates/default-modal-template.html";
return {
restrict: "A",
scope: {
event: "#"
},
controller: ["$scope", "$attrs", "$element", "$uibModal", controller]
}
}])
I using angular bootstrap modal, and I want something like this:
<section>
<header class="modal-header">
<h3 class="modal-title">{{modalOptions.title}}</h3>
</header>
<div class="modal-body" ng-if="modalOptions.templateUrl">
{{modalOptions.content}}
</div>
<div class="modal-body" ng-if="modalOptions.templateUrl" ng-include="modalOptions.templateUrl" ng-controller="modalOptions.templateController"></div>
<footer class="modal-footer">
<button type="button" class="btn btn-danger" ng-click="close()">Close</button>
</footer>
</section>
Of course it's not working because there is no controller like modalOptions.templateController, I want controller name under this variable.
Short: I need something like directive compile in bootstrap modal
Currently I created multiple views for different controllers