I'm trying to pass information about a listing that appears on the show page to the modal on that page.
I successfully created the factory service which returns me an object.
angular.module('articles').factory('ProductService', [ '$resource', 'Articles','$stateParams', function($resource, Articles, $stateParams) {
var listingInfo =
Articles.get({
articleId: $stateParams.articleId
});
return listingInfo;
}
]);
(logged by using angular.element(document.body).injector().get('ProductService'))
If I place this in my main ArticlesController I'm able to see the scope via browser console with angular.element($0).scope() and able to access the object by injecting into my controller and giving it a scope of $scope.product = ProductService;, allowing me to access the data in the expected way (product.furtherinfo).
However when trying the same technique for my modal controllers, I'm unable to find the scope when I log through the browser or access the data through binding or brackets.
I've tried passing the value through the resolve, injecting the dependency in all my controllers having to do with my modal, but nothing works.
// Modals
angular.module('articles').controller('ModalDemoCtrl',['$scope', '$modal', '$log', 'ProductService' , function ($scope, $modal, $log, ProductService) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.product = ProductService;
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
},
product: function () {
return $scope.product;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}]);
The idea is to pass the returned factory object to my modal so I can link it to an input(maybe hidden) that I could designate as a model to send through to an email.
angular.module('articles').controller('ModalInstanceCtrl',['$scope', '$modalInstance', 'items', '$http', 'product','ProductService','$stateParams', function ($scope, $modalInstance, items, $http, product,ProductService,$stateParams) {
$scope.items = items;
$scope.product = product;
$scope.sendMail = function(){
var data = ({
input : this.contactAgentInput,
inputBody : this.contactAgentInputBody,
})
$http.post('/contact-agent', data).
then(function(response) {
// this callback will be called asynchronously
$modalInstance.close($scope.selected.item);
console.log("all is well")
// when the response is available
}, function(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
})
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
Use a debugger or console.log. If you add console.log(ProductService) in your modal controller, it should show you the service is being injected. – Anid Monsur
Thanks for the suggestion #AnidMonsur i noticed my Rentals controller firing off while In the Sales show page (I split the modules into Sales and Rentals). Thinking that I might be launching the modal from the wrong Module. Investigating now. – Meir Snyder
#AnidMonsur that did it! I was using the same names for some of the modal controllers ( stupid obviously) it must have launched the wrong modal instance and that's why I wasn't able to access the object. After giving them distinct names, it now works. Thanks so much, would have spent another day overlooking the error! – Meir Snyder
Let me guess. You're trying to display the items in the ModalDemoCtrl through the ModalInstanceCtrl, but you can't.
It seems you think DI is going to work as long as you put the name of the dependency but it's not until you register the dependency itself. So 'items' won't ever be a dependency at all and all you get is the value in the inner $scope on the controller (which probrablly is undefined).
In your case I'd say you register a third party factory (which is closer to a singleton) which can be injected just alike ProductService, and eventually would be called ItemsFactory.
Hope it helped.
Related
I pass the link of this example, I have a variable called "greeting" that changes its value in a modal window but does not bind. Do not share scope?
http://jsfiddle.net/Bibidesign/Lodkh4jy/7/
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('GreetingController', ['$scope', '$modal', function($scope,$modal) {
$scope.greeting = 'Hello!';
$scope.changeValues = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: 'static',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.greeting = "Welcome";
$scope.cancel = function(){
modalInstance.close();
}
$scope.ok = function(){
modalInstance.close();
}
}
});
};
}]);
You are partially there. We just need to set up passing the variables between the GreetingController and the Modal controller. We will use the resolve property on the object passed into $modal.open() to pass a value to the modal controller, and than when we close the modal, we will pass back the new value through those the results object. We are also removing scope: $scope, because the controller declaration is overriding that scope copy, and we want to keep these scopes separate. Example to follow.
This answer has a more thorough explanation of what is happening with the resolve, but it is essentially just a simplified way to resolve promises and guarantee data is in the controller before initializing the modal.
myApp.controller('GreetingController', ['$scope', '$modal', function($scope,$modal) {
$scope.greeting = 'Hello!';
// this will handle everything modal
$scope.changeValues = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: 'static',
// resolve is an object with all the objects we will pass to the controller
// I'm adding more than just greeting for examples sake
resolve: {
greeting: function () {
return $scope.greeting;
},
testData: function () {
return "This is some random test data";
}
}
// on the controller parameters, we add the properties we are resolving
controller: function($scope, $modalInstance, greeting, testData) {
// the greeting variable passed in through resolve
console.log('greeting', greeting); // expected output: greeting Hello!
// the testData passed in through resolve
console.log('testData', testData); // expected output: testData This is some random test data
// this will be the greeting you are able to access on the modal
// we can set this to the value from the resolve or a new value like below
$scope.greeting = "Welcome";
//$scope.greeting = greeting // this will set the modal to the value passed in from the resolve
// NOTE*** I changed this call to dismiss()
$scope.cancel = function(){
modalInstance.dismiss();
}
$scope.ok = function(){
// what ever we pass in to close will be accessible in the result below
// we are passing in the new greeting - 'Welcome'
modalInstance.close($scope.greeting);
}
}
});
// this is the majority of the new code
modalInstance.result.then(function(okReturnObject){
// this okReturnObject will be whatever you pass in to modalInstance.close()
console.log('return', okReturnObject); // expectedOutput: return Welcome
// this is where we are setting the original value to the new value from the modal
$scope.greeting = okReturnObject;
},function(){
// will be run after modalInstance.dismiss()
console.log("Modal Closed");
});
};
}]);
You can't url refer the text/ng-template as the templateUrl. Instead, add the html form in a separate html file and refer to that in the modal declaration.
Here's a working plunker https://plnkr.co/edit/lMZK0uGNsEmRjAN7teVZ?p=preview
Bear with me - I'm an AngularJS newb.
I have a form that I want to be available from anywhere in my app, and I'm trying to figure out how to code that. My current attempt is to put the modal into a service, like this:
.service('NewObjectService', function() {
var svc = this;
svc.showModal = function() {
$ionicModal.fromTemplateUrl('template.html', {
scope: null, // what should I do here?
animation: 'slide-in-up'
}).then(function(modal) {
svc.modal = modal;
modal.show();
});
}
})
.controller('NewObjectController', function() {
$scope.$on('$ionicView.enter', function() {
console.log('NewObjectController');
// setup new object
})
})
Then from anywhere in my app, I can call NewObjectService.showModal() and the modal pops up. That part is working.
The trouble I'm running into is that I can't get my controller to fire, so the initialization never gets called and my new object is null.
It seems like I should actually be calling the modal from within NewObjectController to setup scope, but I tried that and I couldn't figure out how to call that controller from within other controllers - hence the service.
I know I'm just doing something fundamentally wrong, but I'm not sure what it is. Any help?
Update: I also just tried calling one controller from another using a root scope broadcast:
.controller('MainCtrl', function() {
this.showModal = function() {
$rootScope.$broadcast('new_object:show_modal');
}
})
.controller('NewObjectCtrl', function() {
$rootScope.$on('new_object:show_modal', function() {
// show modal
})
})
The problem I'm running into there is that NewObjectCtrl hasn't been invoked at the time MainCtrl runs, so it doesn't catch the broadcast event.
When you declare a service you need to return itself in the Angular declaration ie var svc = {}; return svc; Call svc.showModal from any controller after you've injected the service and pass in the scope. Call the controller from another controller by using $rootScope.$on (receiver) and $rootScope.$emit (from)
.service('NewObjectService', function($ionicModal) {
var svc = {};
svc.showModal = function(_scope) {
$ionicModal.fromTemplateUrl('template.html', {
scope: _scope, // passing in scope from controller
animation: 'slide-in-up'
}).then(function(modal) {
svc.modal = modal;
modal.show();
});
}
return svc;
})
.controller('NewObjectController', function($scope, $rootScope, NewObjectService) {
// fires off when $rootScope.$emit('ShowModal') is called anywhere
$rootScope.$on('ShowModal', function(data) {
NewObjectService.showModal(data._scope);
});
})
.controller('OtherController', function($scope, $rootScope) {
$scope.contactOtherController = function() {
// contact the other controller from this controller
$rootScope.$emit("ShowModal", {scope: $scope});
}
})
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 have this situation
two files, both in the same app
var app = angular.module('myapp');
file one is the parent and I have:
app.controller("ControllerOne", ['$scope', '$http', '$modal',
function ($scope, $http, $modal) {
$scope.$on('refreshList', function (event, data) {
console.log(data);
});
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithControllerTwo',
controller: 'ControllerTwo',
size: 'lg',
resolve: {
someParam: function () {
return "param"
}
}
});
}
}]);
file two is the child and I have:
app.controller("ControllerTwo", ['$scope', '$http', 'someParam',
function ($scope, $http, someParam) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
$scope.$emit('refreshList', [1,2,3]);
}).error(function () {
});
};
}]);
Assuming that i can open the modal and I can "SaveSomething".
What I need to do to send some data from ControllerTwo to ControllerOne?
I already checked this post Working with $scope.$emit and .$on
but I cant't solve the problem yet.
Obs:
FileOne.js -> I have the ControllerOne (parrent) -> $on
FileTwo.js -> I have the ControllerTwo (child) -> $emit
Yes, I can hit the code inside $http.post.success condition
Assuming you are using angular-ui bootstrap (which has a $model), then the $scope in the model is a childscope of $rootScope.
According to $model documentation you can supply the ControllerOne $scope by using the scope option which will make the modal's $scope a child of whatever you supply. Thus:
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithControllerTwo',
controller: 'ControllerTwo',
size: 'lg',
scope: $scope,
resolve: {
someParam: function () {
return "param"
}
}
});
Then you could emit to that using $scope.$parent.$emit(...). Strictly speaking, this creates a coupling in that it assumes that the user of the modal listens to the events.
If you don't want to inject your scope, they you could inject $rootScope and emit on that. But that would also send the event to every scope in the application.
This is assuming that you actually want to leave the modal open and send a message back to the parent controller. Otherwise, just use close() or dismiss() methods.
I'm trying to have a simple modal appear when a user clicks something that is still under construction on my demo app.
Everything works up to the point where I want the user to click the 'Close' button on the modal. When they do they get:
TypeError: Cannot read property 'dismiss' of undefined
This is what I have in my main controller:
$scope.underConstruction = function () {
var modalInstance = $modal.open({
templateUrl: 'app/shared/underconstruction.html',
controller: 'ModalInstanceCtrl',
size: 'sm',
resolve: {
'$modalInstance': function () { return function () { return modalInstance; } }
}
});
console.log('modal opened');
modalInstance.result.then(function (response) {
$scope.selected = response;
console.log(response);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
Then in my ModalInstanceCtrl I have:
app.controller('ModalInstanceCtrl', ['$scope', '$modal', function ($scope, $modal, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I'm using angular-ui version 0.12.0, angularjs version v1.3.11
The close() method is hit, then the above error is thrown.
I have looked around at various results and questions and seen references to bugs and other issues, but the use cases are more complex than mine - my modal just shows some text and a close button. For example, I found an answer that says:
$modalInstance is made available for injection in the controller by AngularUI Bootstrap implementation. So, we don't need any effort ro "resolve" or make it available somehow.
I was able to simplify things:
$scope.underConstruction = function () {
var modalInstance = $modal.open({
templateUrl: 'app/shared/underconstruction.html'
});
console.log('modal opened');
};
Then in my modal template:
<button class="btn btn-primary" ng-click="$dismiss('cancel')">Close this message</button>
As per the documentation:
In addition the scope associated with modal's content is augmented with 2 methods:
$close(result)
$dismiss(reason)
Those methods make it easy to close a modal window without a need to create a > dedicated controller.
I did try this earlier but I guess either something else was interfering or I didn't clear my cache.
You deliberately "defined" your $modalInstance argument as undefined by not declaring it as a dependency in your Inline Annotation Array where you're declaring the ModalInstanceCtrl controller.
It should have been:
['$scope', '$modal', '$modalInstance', function($scope, $modal, $modalInstance){ ... }]
The "we don't need any effort..." part does not mean you don't have to specify it as a dependency.
it works for me
if(typeof(alert/popover)!="undefined"){
await alert/popover.dismiss();
}