Trying to pass a parameter to a service like this
.service('modalService', ['$modal','$log', function ($modal,$log) {
'use strict';
this.showcodeModal = function(testing) {
$log.warn("gets here");
$log.warn(testing);
$modal.open({
templateUrl: 'views/modal/showcode.html',
controller: 'showcodeCtrl',
windowClass: 'code-result',
resolve: {
address: function () {
return 'test variable';
}
}
});
};
}])
But always returns "undefined" for my parameter "testing".
And it's called from my controller like this
var test = "test";
modalService.showcodeModal(test);
The following works fine. Formatted a bit differently, if that helps.
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', ['$scope','myService',
function ($scope,myService) {
myService.showcodeModal('testing');
}]);
myApp.service("myService",["$http",
function($http) {
return {
showcodeModal:function(aval) {
console.log(aval);
}
};
}]);
Related
I am trying to populate a modal form with data passed in from my controller. The data being displayed is always NULL, even though I have populated the data in the controller.
I have been trying to work this out and have tried a few different ways to do it but none work.
The examples I have seen use $scope, but I don't want to use $scope and instead use controller as
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
(function () {
'use strict';
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($uibModal, $log) {
var vm = this;
vm.vehicle = [{
vehicleRegistration: null,
createUser: null
}];
vm.open = function (size) {
vm.vehicle[0]["vehicleRegistration"] = 'ABCDEFG';
vm.vehicle[0]["createUser"] = 'BOBF';
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
resolve: {
items: function () {
return vm.vehicle;
}
}
});
};
});
})();
(function () {
'use strict';
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var vm = this;
// I want to get the vehicle data pass to populate the form myModalContent.html
vm.vehicle = items;
});
})();
Any ideas?
Here is http://plnkr.co/edit/grHKGEJeKqoR8VHOW8I6?p=preview
First, use another name than vm for the modal. I've set it to vm2, also when defining the modal, you have to set the alias for the controller using the word as like this:
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl as vm2',
size: 'lg',
resolve: {
items: function () {
return vm.vehicle;
}
}
});
Check the link: http://plnkr.co/edit/JmCL6NjAmd2b1UPR8649
I would like to use one controller inside another one. I have found that I could use angular service $controller.
This is what I have tried:
.controller(
'UnplannedTasksController',
[
'$location',
'$uibModal',
'$controller',
'unplannedTasksService',
'messages',
function($location, $uibModal, $controller, unplannedTasksService, messages) {
var ctrl = this;
var modalInstanceCtrl = $controller('ModalInstanceCtrl');
this.openModal = function(unplannedTask) {
var modalInstance = $uibModal.open({
animation: false,
templateUrl: 'unplanned-tasks/unplanned-tasks-modal.html',
controller: modalInstanceCtrl,
controllerAs: 'mdCtrl',
size: 'lm',
resolve: {
object: function() {
return unplannedTask;
},
title: function() {
return messages.unplannedTasks.deleteTitle;
},
question: function() {
return messages.unplannedTasks.deleteQuestion + unplannedTask.partner.name;
}
}
});
modalInstance.result.then(function(unplannedTask) {
ctrl.display.getUnplannedTasksBusyPromise = unplannedTasksService.removeUnplannedTask(unplannedTask.id).then(function(data) {
ctrl.searchUnplannedTasks();
});
});
};
}])
This ModalInstanceCtrl is in another file and look like this:
.controller('ModalInstanceCtrl', function($modalInstance, object, title, question) {
var ctrl = this;
this.object = object;
this.title = title;
this.question = question;
this.ok = function() {
$modalInstance.close(ctrl.object);
};
this.cancel = function() {
$modalInstance.dismiss('cancel');
};
})
But I am getting an error:
"Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModalInstanceCtrl ..."
Could you please advise. Thank you.
[EDIT]
Anyone? Please ...
Best regards,
mismas
According to the Angular-UI documentation, you do not need to use $controller. You just have to tell the controller name the the $uibModal service, as a simple string.
In your case:
var modalInstance = $uibModal.open({
controller: 'modalInstanceCtrl'
// + more params
});
A very common question. help is really appreciated !!
i am not able to pass loginCtrl as a argument in SignupCtrl
Also if there is any proper way to do this please suggest
here is the code
$scope.loginCtrl = function ($scope, $modalInstance) {
$scope.cancelLogin = function () {
$modalInstance.dismiss('cancel');
}
};
$scope.signupCtrl = function ($scope, $modalInstance,loginCtrl){
$scope.close1=loginCtrl.cancelLogin;
$scope.cancelLogin = function () {
$modalInstance.dismiss('cancel');
}
};
Bind click event.
user.showModalDialog = function (item) {
var obj = {
selectedItem: item
};
_showModalDialog(obj);
};
_showModalDialog Method
var _showModalDialog = function (params) {
$modal.open({
templateUrl: "your html template URL",
backdrop: 'static',
windowClass: 'modal-width-50',
resolve: {
params: function () { return params; }
},
controller: function ($scope, $modalInstance, params) {
var user = params.selectedItem;
// you can receive your params here in params.
$scope.user=user;
}
Another way of doing this,
var _showModalDialog = function (params) {
$modal.open({
templateUrl: "your html template URL",
backdrop: 'static',
controller: _userCtrl,
windowClass: 'modal-width-50',
resolve: {
params: function () { return params; }
}});
its controller in the same file, its the inline controller, you can also make it in external file.
var _userCtrl = ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
var user = params.selectedItem;
// you can receive your params here in params.
$scope.user = user;
}];
Second approach is, you can pass data between two controllers by use of service.
I have a little issue by using a customize directive within the template field of UI-Bootstrap modal directive.
My aim is send data to modal via resolve attribute and re-use these resolved parameters inside the controller of my own directive.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('MyCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function () {
var popup = $modal.open({
template: '<my-modal></my-modal>',
resolve : {
mydata : function() {
return 42;
}
}
});
};
}]);
app.controller('ModalController', ['$scope', 'mydata', function($scope, mydata) {
//The error is in this directive controller
$scope.mydata = mydata;
}]);
app.directive('myModal', function() {
return {
restrict: 'E',
templateUrl : 'mymodal.html',
controller : 'ModalController',
replace: true
};
});
Maybe I proceed in the wrong way.
Any suggest to make this code functionnal ?
http://plnkr.co/edit/RND2Jju79aOFlfQGnGN8?p=preview
The resolve parameters are only injected to the controller defined in the $modal.open config parameters, but you want to inject it to the directive controller. That will not work. Imagine you would use the myModal directive somewhere else, there wouldn't be a myData object that could be used.
But i don't realy see, what you need the directive for. You could go much easier this way:
app.controller('MyCtrl', ['$scope', '$modal',
function($scope, $modal) {
$scope.openModal = function() {
var popup = $modal.open({
templateUrl: 'mymodal.html',
controller: 'ModalController',
resolve: {
mydata: function() {
return 42;
}
}
});
};
}
]);
// Here the mydata of your resolves will be injected!
app.controller('ModalController', ['$scope', 'mydata',
function($scope, mydata) {
$scope.mydata = mydata
}
]);
Plunker: http://plnkr.co/edit/bIhiwRjkUFb4oUy9Wn8w?p=preview
you need to provide an Object "mydata". Ensure, that you have a correct implemented factory which provides your myData Object. If you had done that, you can "inject" your myData Object where ever you want to.
yourApp.MyDataFactory = function () {
var myData = {i: "am", an: "object"};
return myData;
}
this would provide an "myData" Object
I'm not sure what you are trying to accomplish with the directive, but if you are trying to provide a generic way to invoke the $model, that you can then use from many places in your app, you may be better off to wrap $model with a service. Than you can then call from other places in your app.
I forked and modified your plunkr to work this way: http://plnkr.co/edit/0CShbYNNWNC9SiuLDVw3?p=preview
app.controller('MyCtrl', ['$scope', 'modalSvc', function($scope, modalSvc) {
var mydata = {
value1: 42
};
$scope.openModal = function () {
modalSvc.open(mydata);
};
}]);
app.factory('modalSvc', ['$modal', function ($modal) {
var open = function (mydata) {
var modalInstance,
modalConfig = {
controller: 'ModalController',
resolve: {
mydata: function () {
return mydata;
}
},
templateUrl: 'mymodal.html'
};
modalInstance = $modal.open(modalConfig);
return modalInstance;
};
return {
open: open
};
}]);
Also, I changed mydata to be an object, rather than '42', as I am sure you will have other data to pass in. the markup was updated accouringly:
<div class="modal-body">
BODY {{mydata.value1}}
</div>
Doing it this way, the resolve property works, and you can get your data.
As for the other answers mentioning you must define mydata, the resolve property passed into $model does this for you, so it can be injected into the modal's controller (ModalController), like you have done.
I'm trying to load a job by Id from the API and pass it to the controller.
.when('/jobs/edit/:id', {
templateUrl: 'partials/jobs/edit',
controller: 'JobCtrl',
resolve: function($routeParams, Job){
var jobId = $routeParams.id;
return {
job: function(){
return Job.get({ id: jobId});
}
};
}
})
Controller:
angular.module('App')
.controller('JobCtrl', function ($scope, Job, $location, $routeParams) {
$scope.newJob = data.job; //does not work
$scope.errors = {};
$scope.save = function (form) {
//...
};
});
Model:
angular.module('App')
.factory('Job', function ($resource) {
return $resource('/api/jobs/:id', {
id: '#id'
}, { //parameters default
update: {
method: 'PUT'
}
});
});
How do I get the data in the controller? My resolve block in the route is not even being executed.
Edit: this page has lots of examples of different types of resolving:
http://phillippuleo.com/articles/angularjs-timing-multiple-resource-resolves-ngroute-and-ui-router
It seems like you resolve implementation is incorrect.
You could try to change router like:
.when('/jobs/edit/:id', {
templateUrl: 'partials/jobs/edit',
controller: 'JobCtrl',
resolve: {
job: function (Job, $routeParams) {
return Job.get({id: $routeParams.id});
}
}
})
And get resoled data in controller by including Job into dependencies:
angular.module('App')
.controller('JobCtrl', function ($scope, job, $location, $routeParams) {
// job is resolved here
$scope.job = job;
$scope.newJob = {};
$scope.errors = {};
$scope.save = function (form) {
//...
};
});
UPDATED
If you want to use JobCtrl either for creating and editing, you can return null in resoled job for new-job-page. It means: There aren't any job yet, till you create one.
.when('/jobs/new', {
templateUrl: 'partials/jobs/new',
controller: 'JobCtrl',
resolve: {
job: function () {
return null;
}
}
})