Id like to pass data from 1 view (master view ) to modal view using angular ui bootstrap plugin , below is my code which doesn't seem to work :
master view
vm.receipt_id = "1234"
<button type="button" class="btn btn-default" ng-click="vm.alertMeJimmy(vm.receipt_id)">Large modal</button>
controller
vm.alertMeJimmy = function(receipt_id) {
$uibModal.open({
animation: true ,
templateUrl: '/cashier/views/cashier.angular_components.modal',
controller: 'PatientsController',
controllerAs: 'vm',
resolve: {
receipt_id : function () {
return receipt_id ;
}
},
size: 'lg'
});
}
modal view
id like to access it like below in my modal view
<span ng-bind="vm.receipt_id " ></span>
Return an object instead of a primitive:
angular.module('App').controller('Controller', [
'$uibModal',
function ($uibModal) {
var vm = this;
vm.receipt_id = 1234;
vm.alertMeJimmy = function (receipt_id) {
var modalInstance = $uibModal.open({
size: 'sm',
templateUrl: 'modal.html',
controller: 'Modal as vm',
resolve: {
'receipt': { id: receipt_id }
}
});
}
}
]);
angular.module('App').controller('Modal', [
'receipt',
function (receipt) {
var vm = this;
vm.receipt = receipt;
}
]);
Example on Plunker: http://plnkr.co/edit/d9RLJLHr1zr9d5gVKHpD?p=preview
Related
I'm working on a project that makes sense to add and edit items within a modal window. The add portion is working fine. The edit portion is opening the modal but my ng-model is not reflecting and the input fields are blank within the modal window.
Here's a plunker to illustrate the issue:
http://plnkr.co/edit/8mHOo0YE4qv0UcDvCCgS?p=preview
AngularJS Code:
// Code goes here
var userPopup = angular.module('userPopup', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
userPopup.controller('popupController', function($scope, $uibModal, $log) {
$scope.users = [{
name: 'Steve',
job: 'Accounting',
age: '39',
sal: '36000',
addr: '123 Streetly Unit 2, Chicago, IL 60601'
}];
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
templateUrl: 'edit.html',
controller: 'editDialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return $scope.user;
}
}
});
};
$scope.addUser = function() {
var dialogInst = $uibModal.open({
templateUrl: 'popup.html',
controller: 'DialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return $scope.user;
}
}
});
dialogInst.result.then(function(newuser) {
$scope.users.push(newuser);
$scope.user = {
name: '',
job: '',
age: '',
sal: '',
addr: ''
};
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
userPopup.controller('DialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
//Assign Selected User
$scope.user = selectedUser;
$scope.submitUser = function() {
$uibModalInstance.close($scope.user);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
userPopup.controller('editDialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
//Assign Selected User
$scope.user = selectedUser;
$scope.save = function() {
$uibModalInstance.close($scope.user);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
HTML Code:
<a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a>
I know it's close and I'm overlooking something. Please advise.
thank you
You have two issues, that are just typos, really.
In your JS code:
// passing `user` here
// v
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
/* ... */
resolve: {
selectedUser: function() {
return $scope.user;
} // ^
} // using $scope.user there
});
};
You're passing an argument to the editUser function, but not actually using it; referring instead to $scope.user, which is undefined.
It should be: selectedUser: function() { return user; }
In your HTML template:
<!-- declaring `user` here -->
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.job}}</td>
<td>{{user.age}}</td>
<td>{{user.sal | currency}}</td>
<td>{{user.addr}}</td>
<!-- using `selectedUser` there -->
<td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>
</tr>
You're iterating over users, using a user variable; then referring to a (non-existent) selectedUser when calling editUser.
It should be: <a class="btn btn-link" ng-click="editUser(user)">Edit</a>
Here's a link to a (working) fork of your plunk.
You need to change this code in your view.
replace this code
<td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>
to
<td><a class="btn btn-link" ng-click="editUser(user)">Edit</a></td>
and in your controller when invoke the modal.. change
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
templateUrl: 'edit.html',
controller: 'editDialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return $scope.user;
}
}
});
};
to
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
templateUrl: 'edit.html',
controller: 'editDialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return user;
}
}
});
};
User clicks on videoClick
<div ng-repeat="list in lists" ng-click="videoClick(list.src)">
{{list.src}}
</div>
This works and following executes.
$scope.videoClick = function(val) {
$log.info('received.');
var modalInstance = $uibModal.open({
size: 'lg',
templateUrl: '/views/video_modal.html',
animation: true,
backdrop: false,
controller: 'VideoController',
resolve: {
videoPath: function() {
return val;
}
}
});
};
Now i am trying to get the value of 'videoPath' but i am getting an error.
Inside 'VideoController'
angular
.module('tss.application')
.controller('VideoController', function(videoPath) {
"use strict";
});
*
Any idea why i am not able to get the value of 'videoPath' inside 'VideoController' ?
*
Can you try
angular
.module('tss.application')
.controller('VideoController',['videoPath',function(videoPath) {
"use strict";
}]);
In my controller.js file I have:
angular.module('App').controller('AppCtrl', AppCtrl);
function AddApp(){
var vm = this;
vm.resetForm = resetForm;
function resetForm(){
vm.myForm.$setPristine();
}
}
...
function openModal(message){
var errorMessage = message;
var modalInstance = $modal.open({
templateUrl: 'url',
controller: 'AppCtrl',
controllerAs: 'App',
resolve: {
errorMessage: function () {
return errorMessage;
}
}
});
}
and in my modal I have
<div ng-controller="AppCtrl as App">
<form name=App.myForm>
...
when I use this format it tells me that
vm.myForm is undefined.
This is the closest thing I've found here, but it still did not work for me
Can I access a form in the controller?
You can pass the form by adding it to the resolve:
var modalInstance = $modal.open({
templateUrl: 'url',
controller: 'AppCtrl',
controllerAs: 'App',
resolve: {
errorMessage: function () {
return errorMessage;
},
myForm: function() {
return vm.myForm;
}
}
});
In your modal controller:
angular.module('app').controller('AppCtrl',
['$scope', 'errorMessage', 'myForm',
function ($scope, errorMessage, myForm) {
console.log(myForm);
}]
);
I think I'm missing something but cannot figure what.
Basically I'm trying to pass an object to the modal like below, but instead of getting the passed object I gets null...so I think is a problem with the scope but I'm new in Angular and need some help.
Controller
app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {
$scope.selected = null;
$scope.open = function (item) {
$scope.selected = item;
$log.info('Open' + $scope.selected); // get right passes object
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'musicViewModel',
size: 'lg',
resolve: {
items: function () {
return $scope.selected;
}
}
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
View
<div class="row" ng-controller="musicViewModel">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li>
{{ selected }} // always gets null
</li>
</ul>
</div>
</script>
</div>
I'd suggest you to pass the scope of your own controller instead of passing same controller again, by doing that you can remove the resolve also.
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope, //passed current scope to the modal
size: 'lg'
});
Otherwise you need to create a new controller and assign that controller for modal while opening it.
When you use resolve, the map is injected into the given controller.
I recommend that u use a different controller to handle the modal functionality (separation of concerns).
I also recommend to use dependency injection to support minification of the code. Step 5 on the Angular tutorial wil explain this.
A simplified example of the modal controller would be.
(function () {
'use strict';
var app = angular.module('App');
app.controller('musicDetailController',
['$scope', '$uibModalInstance', 'items',
function ($scope, $uibModalInstance, items) {
$scope.items = items;
}]);
}());
You cannot pass an object directly.
I've tried all the solutions above, but wasn't really satisfied. I've solved the issue by writing a simple parser that enables you to pass both strings and objects directly to the modal, through the provided resolve function.
app.controller('ModalController', ['$uibModal', '$scope', function ($uibModal, $scope) {
// Initialize $modal
var $modal = this;
// Open component modal
$modal.open = function (component, size, data) {
// Init modal
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
component: component,
size: size || 'md',
resolve: parseResolve(data)
});
};
// Parse the resolve object
function parseResolve(data) {
if (typeof data === 'string') {
return {
data: function() {
return data;
}
}
}
else if (typeof data === 'object') {
var resolve = {};
angular.forEach(data, function(value, key) {
resolve[key] = function() {
return value;
}
})
return resolve;
}
}
}]);
When usings strings
Template:
<button ng-click="$modal.open('modalSomething', 'md', 'value'">
Click
</button>
Component:
bindings: {
resolve: '#'
}
When using objects
Template:
<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})">
Click
</button>
Component:
bindings: {
resolve: '<'
}
I got the below code working:
this.OpenModal = function() {
var modalInstance = $uibModal.open({
url: "/name?parameter=" + $scope.Object.ParamValue,
templateUrl: 'views/module/page.html',
controller: myController
});
}
I am using a bootstrap modal
Controller.js -
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
controller: 'controller2',
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};
I don't want to create a new controller since the modal should show values which are constantly changing in the current controller. What should I pass in place of controller2 if I modal to be in the same controller?
You could use the scope option instead of the controller:
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
scope: $scope,
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};