I'm trying to pass an object to the modal controller with resolve but it doesn't appear to pass correctly. I can console.log the object fine right before I pass it, but trying to log it in the modal controller just shows it is undefined. I've looked at other related questions but I can't see what I'm doing differently from the answers they've been given. Here's my controllers:
app.controller('BlogController', ['$scope', '$http', '$modal', function($scope, $http, $modal){
$scope.blogEntry = {}; // Place holder for data (blog entry)
$scope.editBlogEntry = function(blogEntry) {
$scope.blogEntry = blogEntry;
$scope.editModal = $modal.open({
templateUrl: '/resources/partials/editBlogModal.html',
controller: 'EditBlogController',
size: 'lg',
resolve: {
blogEntry: function() {
console.log($scope.blogEntry); //this shows the object
return $scope.blogEntry;
}
}
});
};
}]);
app.controller('EditBlogController', ['$scope', '$http', '$modalInstance', function($scope, $http, $modalInstance, blogEntry){
$scope.blogEntry = blogEntry;
console.log($scope.blogEntry); //undefined
}])
Can anyone see what I'm missing? Really appreciate the help!
You forgot to add blogEntry as the last string in the array passed to the modal controller.
app.controller('EditBlogController', ['$scope', '$http', '$modalInstance', function($scope, $http, $modalInstance, blogEntry)
HERE ^
Do yourself a favor, and use ng-annotate, which will remove the need for this ugly array syntax, and thus avoid those kinds of bugs.
Related
This might be me just missing something or getting the wrong end of the stick on the tutorial, so bear with me.
I have my app....
var shepApp = angular.module('shepApp', [
'ngRoute',
'ui-notification',
'shepControllers',
'shepFilters',
'shepServices'
]);
shepApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/galaxies', {
templateUrl: "partials/galaxies.html",
controller: 'GalaxyListCtrl'
}).
}]);
And my controllers go something like this....
var shepControllers = angular.module('shepControllers', []);
shepControllers.controller('GalaxyListCtrl', ['$scope', '$location', 'Notification', 'Galaxy', function($scope, $location, Notification, Galaxy) {
$scope.galaxys = Galaxy.query();
$scope.blah = function(){
alert(123);
}
}]);
shepControllers.controller('GalaxyDetailCtrl', ['$scope', '$routeParams', '$location', 'Notification', 'Galaxy', function($scope, $routeParams, $location, Notification, Galaxy) {
$scope.galaxy = Galaxy.get({slug: $routeParams.slug});
}]);
My galaxies.html partial contains the following HTML using ng-click.
<button ng-click="blah"></button>
My thinking was that that blah function for the click event would be exposed when my route is /galaxies and the controller in use is GalaxyListCtrl - but the alert is never fired at all.
I think I am missing something in the way this all fits together.
Calling a function without arguments is done using the name of the function followed by parentheses:
ng-click="blah()"
I am trying to use AngularUI modal's and I cannot seem to figure out why it is not resolving my variables.
Function that opens the modal and the modal instance
$scope.openModal = function (size, cert) {
var modalInstance = $modal.open({
template: 'ModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
certs: function () {
return $scope.certification;
}
}
});
modalInstance.result.then(function () {});
};
Modal Controller some stuff in here is leftover from debugging
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', function ($scope, $filter, $modalInstance, certs) {
console.log(certs);
var results = $filter('filter')(certs, {id: id})[0];
$scope.cert = results;
$scope.ok = function () {
$modalInstance.close();
};
}]);
The main issue is that when it gets into the controller I am getting undefined for certs even though it should be resolved by the openModal function. I was following the official angular UI tutorial on how to do them here: Angular UI Bootstrap Modals
In your injection of 'certs' into your controller, you need to add it to the name declaration as well as the function.
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', 'certs', function ($scope, $filter, $modalInstance, certs) {
I have been experimenting with AngularJS values, and wish to store a global value for accessing and setting in different controllers.
So I have been trying out with the value approach like so:
var app = angular.module('myApp', []);
app.value('globalValue', 0);
app.controller('myCtrl', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
$scope.updateValue = function() {
globalValue++;
};
}]);
app.controller('myCtrlB', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
$scope.someValueB=globalValue;
}]);
Here's a fiddle
This is not working as I thought it might, so in my fiddle, when clicking the button to increment my 'global', the scope property in myCtrlB does not change.
I have clearly gone about this the wrong way, have I totally misunderstood how to use value()'s here?
Thanks
This code should work basically you need an object so both controllers are pointing at the same object and some property of that object is changed. Otherwise you are assigning the initial value of globalValue to some local variable but it's not a reference.
var app = angular.module('myApp', []);
app.value('globalValue', {counter:0});
app.controller('myCtrl', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
$scope.updateValue = function() {
globalValue.counter++;
};
}]);
app.controller('myCtrlB', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
$scope.someValueB=globalValue;
}]);
Updated fiddle: http://jsfiddle.net/kfxy5hs1/3/
I asked a similar question earlier when attempting to inject $scope and $http into a controller Cannot call method 'jsonp' of undefined in Angular.js controller. Now I'm attempting to refactor that code slightly by moving the code into a function within the controller. I'm encountering similar issues and can't seem to grasp the mechanics of dependency injection in Angular. Below is my new code. Both $scope and $http are undefined. What I'm attempting to do is make an http request when didSelectLanguage() fires and assign the resulting data to the "image" variable in the $scope from the parent controller. Can someone enlighten me as to how dependency injection is supposed to work in this example?
angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.didSelectLanguage=function($scope, $http) {
console.log($scope);
$http.jsonp('http://localhost:3000/image?quantity=1&language='+this.language+'&Flag=&callback=JSON_CALLBACK')
.success(function(data){
$scope.image = data;
});
}
}])
When you create your controller:
angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {
// ...
}]);
The stuff inside the body of the controller function automatically has access to $scope and $http because of closures. Thus, there's no need to specify anything additional for a function on the $scope to have access to these things:
angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.didSelectLanguage = function() {
$http.jsonp('http://localhost:3000/image?quantity=1&language=' + this.language + '&Flag=&callback=JSON_CALLBACK');
.success(function(data) {
$scope.$parent.image = data;
});
}
}]);
When didSelectLanguage is run, it sees the references to $http, and reaches out of the function into the outer function to get the value of the reference; the same happens for $scope inside the success callback.
So, in short, there's no need to pass any arguments to your didSelectLanguage function, nor is there in this case any reason to use the $injector.
With the help of Michelle Tilley's comment & article I solved the problem as follows. However, I'm going to keep the question open until someone else answers or until I understand enough to write an accompanying explanation.
controller('ImagesCtrl', ['$scope', '$http', '$injector', function ($scope, $http, $injector) {
$scope.didSelectLanguage=function() {
$http.jsonp('http://localhost:3000/image?quantity=1&language='+this.language+'&Flag=&callback=JSON_CALLBACK')
.success(function(data){
$scope.$parent.image = data;
});
}
}])
I've two routes with resolve. Goes like this:
.when('/foos', {
templateUrl: 'views/foos.html',
controller: 'FoosCtrl',
resolve: {
foo_list: ['$q', '$route', '$timeout', '$location', 'Foos', function($q, $route, $timeout, $location, Foos) {
// postpone the execution
var deferred_foo = $q.defer()
Foos.getFoos({token:session_uid}, successCb)
function successCb(list) {
if(list['status'] === 200) {
deferred_foo.resolve(list)
}
else {
alert('Crashcrashcrash')
deferred_foo.reject("Something just wasn't right")
//$location.path('maintenance')
}
}
return deferred_foo.promise
}]
}
})
.when('/r/:type/:bar_id', {
templateUrl: 'views/bar.html',
controller: 'BarsCtrl',
resolve: {
bar: ['$q', '$route', '$timeout', '$location', 'Bars', function($q, $route, $timeout, $location, Bars) {
// postpone the execution
var deferred = $q.defer()
Bars.getBar({type: bar_type}, successCb)
function successCb(result) {
if(result['status'] === 200) {
deferred.resolve(result)
}
else {
alert('Crashcrashcrash')
deferred.reject("Something just wasn't right")
$location.path('foos')
}
return deferred.promise
}]
}
})
Then I've two controllers working like this:
App.controller('FoosCtrl', ['$scope', '$location', 'Foos', 'foo_list', function($scope, $location, Foos, foo_list) {...}
App.controller('BarsCtrl', ['$scope', '$routeParams', '$location', 'Bars', 'bar', 'sharedService', function($scope, $routeParams, $location, Bars, bar, sharedService) {...}
Could somebody explain why Bar works but Foo gives me Error: Unknown provider: foo_listProvider <- foo_list? I've tried replacing foo_list with different name in case camelCasing did something but didn't help.
So, this question was surprisingly similar to my own which I just figured out with help from the folks over at the Angular IRC channel... are you, by chance, setting up your controller though ng-controller? I had:
<div ng-controller="myCtrl">
... when it should have been removed:
<div>
... because I was setting up the controller in the resolve on the router. That's what I was doing and it was causing this very issue. You can see more here:
https://stackoverflow.com/a/18305423/1306982
foo_list <- is the js file for this being loaded in the your html page in a script tag? it just mightbe the case that when you have forgotten to include factory/service/controller and actually have forgotten to include it in a script tag in the index/app html page (or require shims)
Okay just saw your comment and extending the answer here cos its easier to do it here.
Your code where you declare the controller should read like
App.controller('FoosCtrl',
['$scope', '$location', 'Foos', /* comment out foo_list here*/
function($scope, $location, Foos, foo_list /* this remains */) {
...
}
when the route is getting changed things you mention in 'resolve' would get resolved by ui-router. But it the place where you are declaring your FoosCtrl you don't actually have a provider for it to resolve.
Give this a try i had a similar case like this last week.
Just as a heads up, I just had a similar issue which was caused by adding the resolve-variables as a dependency to the controller while not having set up the response funciton in the $stateProvider.state() yet.
Adding the resolve function fixed the missing dependency
(I still don't quite get why - I'd be glad if anyone could share his knowledge in the comments)