I got problem, I'm trying to get controller instance in my service:
myAppModule.service('modalService',
function ($modal, $controller) {
var controller = $controller('ExperienceDetailsModalCtrl');
});
but I've got error:
TypeError: Cannot read property '$scope' of undefined
Is it possible to access controller (defined in another file) and pass it to modal?
My controller:
myAppIndexModule
.controller('ExperienceDetailsModalCtrl', function ($scope) {
});
You can't access controller scope in service, factory or provider. The data which you wanted to share should be placed inside a service. & make it available to other controller.
I think you do want to pass controller scope to $modal then you can achieve this by doing from controller itself.
$modal.open({$scope: $controller('ExperienceDetailsModalCtrl', {$scope: $scope}), templateUrl: 'abc.html'})
Update
You could do it like below
myAppModule.service('modalService',
function ($modal, $controller, $rootScope) {
var scope = $rootScope.$new(true);
$controller('ExperienceDetailsModalCtrl',{scope: $scope });
//in scope now you will have ExperienceDetailsModalCtrl scope
});
Related
I am getting errors in custome service if I use $scope, But it works fine with $rootScope. Can't we use $scope in custome service
app.service("myService", function ($rootScope) {
console.log($rootScope);
this.root = $rootScope;
});
app.run(function (myService, $rootScope) {
console.log($rootScope);
console.log(myService.root);
});
You can only get $rootScope injected to services and run function, because each child scope is inherited from its parent scope and the top level scope is rootScope. Since it would be ambigous to inject any scope. Only root scope is provided.
Services are created before controllers, so there is no child scope available to inject.
for example, app.controller is my main controller.
app.controller('appController', ['$scope','$ionicNavBarDelegate', function ($scope,$ionicNavBarDelegate) {
}]);
and my second controller is :
app.controller('loginPage', ['$scope','$ionicNavBarDelegate', function ($scope,$ionicNavBarDelegate) {
}]);
Can i pass $scope in the main controller and have it be passed along to the loginPage controller without typing it out again in the loginPage controller?
Yes you can pass data from one controller to other using
$rootScope
For
app.controller('loginPage', ['$rootScope','$scope','$ionicNavBarDelegate', function ($rootScope,$scope,$ionicNavBarDelegate) {
$rootScope.Items = "rootscope varibale";
}]);
app.controller('appController', ['$rootScope','$scope','$ionicNavBarDelegate', function ($rootScope,$scope,$ionicNavBarDelegate) {
console.log($rootScope.Items);
}]);
You can use $rootScope instead of $scope.
I have the following preloader.js factory file included in my project.
angular.module('movieSeat')
.factory('preloader', function( $q, $rootScope ) {
In my controller I inject the factory as following:
angular.module('movieSeat')
.controller('moviesearchCtrl', ['$scope', 'moviesearchFactory', function ($scope, moviesearchFactory, preloader) {
When I try to use the preloadImages function inside the preload controller:
$scope.imageLocations = [
"https://image.tmdb.org/t/p/w300_and_h450_bestv2//nlqFgG7jfBITl8fJHzL72jXwYLt.jpg",
"https://image.tmdb.org/t/p/w300_and_h450_bestv2//ghL4ub6vwbYShlqCFHpoIRwx2sm.jpg",
"https://image.tmdb.org/t/p/w300_and_h450_bestv2//weUSwMdQIa3NaXVzwUoIIcAi85d.jpg",
];
preloader.preloadImages($scope.imageLocations)
I get the following error:
Cannot read property 'preloadImages' of undefined
If I comment out the preloader.preloadImages($scope.imageLocations) code the error is gone. So to me it looks like injecting the preloader factory in my controller works fine but I can't figure out why I can't call the function preloadImages on the preload factory.
There's a typo in the dependency injection list. You forgot to add preloader in the list of dependency strings.
.controller('moviesearchCtrl', ['$scope', 'moviesearchFactory', 'preloader' /*here*/, function ($scope, moviesearchFactory, preloader) {
You need to reference your factory/service 'preloader' in your controller call as follows:
angular.module('movieSeat')
.controller('moviesearchCtrl', ['$scope', 'moviesearchFactory', 'preloader', function ($scope, moviesearchFactory, preloader) {
})
I'm learning angular and have a sample login code. This code has a constructor that clears out the credentials when called. My question is: when is the constructor called? Is it once when the code is initialized or every time a method on the controller is called? I might be confusing this with the way my backend dev framework works with DI which runs the constructor for my controllers only once when initialized.
As a followup question, do I need a logout function or will the constructor be good enough?
This is the code I'm looking at currently:
(function () {
'use strict';
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$rootScope', '$location', 'AuthenticationService', 'FlashService'];
function LoginController($rootScope, $location, AuthenticationService, FlashService) {
var vm = this;
vm.login = login;
(function initController() {
// reset login status
AuthenticationService.ClearCredentials();
})();
function login() {
vm.dataLoading = true;
var promise = AuthenticationService.Login(vm.username, vm.password)
.then(function(userInfo){
AuthenticationService.SetCredentials(userInfo);
$location.path('/');
}, function(failedReason) {
FlashService.Error(failedReason);
vm.dataLoading = false;
});
};
function logout() {
AuthenticationService.ClearCredentials();
$location.path('/login');
};
}
})();
This code is based off of Jason Watmore's blog - http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx.
I have read through the docs here once: https://docs.angularjs.org/guide/controller
It gets called every time a view or directive to which it is attached gets displayed.
The controller will be called when and ng-controller is found in html document or when a view is changed.
And when a controller is called all functions side it will be initialized but not called.So you may have to call the log out function to logout user.but re rendering the view will logout the user Which I don't think is the case here.(I am assuming it is a single view template)
Here the snippet from angular documentation.. Go through it again.
""In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.
When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.
If the controller has been attached using the controller as syntax then the controller instance will be assigned to a property on the new scope.""
I need current path from url in template (content of $location.path). But not via controller, because I have a lot of controllers (and I do not want to duplicate declaration of $scope.currentUrl = $location.path;). Thanks for the advice.
AngularJS template can only see what is available in a scope so you will need somehow to put $location service in a scope. There is one scope that is always available in AngularJS application called $rootScope so it could be use for your use-case.
What you could do is to use run() method of a module to expose $location in the $rootScope:
var myApp = angular.module('myApp', []).run(function($rootScope, $location) {
$rootScope.location = $location;
});
this would make 'location' available in all templates so later on you could do in your template:
Current path: {{location.path()}}
An alternative is to use the more semantic and versatile ui-router, then in the controller, retrieve the current state, and store it on the $scope:
app.controller('MyCtrl', ['$scope', '$state', function MyCtrl($scope, $state) {
$scope.state = $state.current.name;
...
}