ReferenceError: $state is not defined - javascript

I have a rails application which use AngularJS and I have a problem, the problem is that I want redirect to a certain state after a form is submited, but in the chrome's console I have a ReferenceError: $state is not defined and nothing happens.
This is my controller.
angular.module('myapp')
.controller('CreatePollCtrl', ['$scope', 'Restangular', '$state',
function($scope, Restangular) {
$scope.addPoll = function() {
if ($scope.allow_anonymous_answer == null)
$scope.allow_anonymous_answer = false
var poll = {title: $scope.title, description: $scope.description, allow_anonymous_answer: $scope.allow_anonymous_answer, initial_message: $scope.initial_message, final_message: $scope.final_message};
Restangular.all('polls').post(poll).then(function(response) {
$state.go('dashboard');
});
};
}]);
What can I do?, is $state correctly injected?

you forgot add $state to function()
angular.module('myapp')
.controller('CreatePollCtrl', ['$scope', 'Restangular', '$state',
function($scope, Restangular, $state) {

Add $state as a parameter to your function, like $scope.addPoll = function($state) {...}

Related

Angular Factory "Cannot read property 'property' of undefined

Using Angular 1.6.x
Having a really hard time getting a Factory to work with a login submit
login.controller.js
angular.module('appName').controller('LoginController',[
'$scope',
function($scope, Login){
$scope.submitLogin = function(){
console.log('login requested');
Login.login();
}
}]);
login.factory.js
angular.module('appName').factory('Login', function (){
var service = {};
service.login = function(){
console.log('Login Factory');
}
return service;
});
The error I'm getting is TypeError: Cannot read property 'login' of undefined
From all the examples I've looked at I'm injecting the factory into the controller, created an object in the factory, and returning that object back. What am I missing here?
Another question to is why am I unable to include the factory in my controller via?
angular.module('appName').controller('LoginController',[
'$scope',
Login, // <<<<<< This throws an error (scripts.min.js:1 Uncaught ReferenceError: Login is not defined)
function($scope, Login){
$scope.submitLogin = function(){
console.log('login requested');
Login.login();
}
}]);
The reason I'm injecting this way is to eliminate the possibilities of errors during minification.
Edit
Question answered with injecting Factory with Quotes.
angular.module('appName').controller('LoginController',[
'$scope',
'Login', // <<<< Was not using quotes
function($scope, Login){
$scope.submitLogin = function(){
console.log('login requested');
Login.login();
}
}]);
You have to inject Login factory and wrap it within quotes 'Login':
'$scope', 'Login',
function($scope, Login){
angular.module('appName').controller('LoginController',[
'$scope',
'Login', // <<<<<< you should inject within quotes
$scope.submitLogin = function(){
console.log('login requested');
Login.login();
}
}]);
You need to enclose the factoryName within single quotes
angular.module('appName').controller('LoginController',[
'$scope',
'Login', // Change hereReferenceError: Login is not defined)
function($scope, Login){
$scope.submitLogin = function(){
console.log('login requested');
Login.login();
}
}]);
It should be, You are missing ''
angular.module('appName').controller('LoginController',[
'$scope',
'Login',
function($scope, Login){
}]);
Also note that the order of your injections with quotes needs to be consistent with the parameters. For example, the following will still give you an undefined:
angular.module('appName').controller('LoginController',
['$scope', 'Factory1', 'Factory2',
function($scope, Factory2, Factory1){
Factory1.something; // undefined
Factory2.something; // undefined
}]);
You need follow the sequence, like this:
angular.module('appName').controller('LoginController',
['$scope', 'Factory1', 'Factory2',
function($scope, Factory1, Factory2){
Factory1.something; // Yay!
Factory2.something; // Woohoo!
}]);

AngularJS: '$scope is not defined'

I keep getting '$scope is not defined' console errors for this controller code in AngularJS:
angular.module('articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Authentication', 'Articles',
function($scope, $routeParams, $location, Authentication, Articles){
$scope.authentication = Authentication;
}
]);
$scope.create = function() { // THROWS ERROR ON THIS INSTANCE OF $SCOPE
var article = new Articles({
title: this.title,
content: this.content
});
article.$save(function(response) {
$location.path('articles/' + response._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
Where in my AngularJS MVC files should I be looking at to find problems with the $scope not being defined properly?
For others who land here from Google, you'll get this error if you forget the quotes around $scope when you're annotating the function for minification.
Error
app.controller('myCtrl', [$scope, function($scope) {
...
}]);
Happy Angular
app.controller('myCtrl', ['$scope', function($scope) {
...
}]);
Place that code inside controller:-
angular.module('articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Authentication', 'Articles',
function($scope, $routeParams, $location, Authentication, Articles){
$scope.authentication = Authentication;
$scope.create = function() { // THROWS ERROR ON THIS INSTANCE OF $SCOPE
var article = new Articles({
title: this.title,
content: this.content
});
article.$save(function(response) {
$location.path('articles/' + response._id);
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
}
]);
Just put you $scope.create function inside your controller. Not outside !
$scope is only defined in controllers, each controller have its own. So write $scope outside your controller can't work.
Check scope variable declared after controller defined.
Eg:
var app = angular.module('myApp','');
app.controller('customersCtrl', function($scope, $http) {
//define scope variable here.
});
Check defined range of controller in view page.
Eg:
<div ng-controller="mycontroller">
//scope variable used inside these blocks
<div>

Angular factory undefined in controller

I am working on a very simple factory to be used inside an angular controller. The problem is that the factory doesn't seem to be getting picked up inside the controller. The console.log returns undefined and I can't seem to figure out why.
var app = angular.module('App', ['ngRoute', 'ngTouch']);
app.controller('AppController', [
'$scope',
'$rootScope',
'myFactory',
function($scope, $routeParams, myFactory) {
console.log(myFactory)
}]);
app.factory('myFactory', function() {
return 'test';
});
The problem is that your controller is is injecting $rootScope and then you change it to $routeParams in the function. Have a look at this fiddle http://jsfiddle.net/wkqajL2x/6/ where I have removed those two attributes. It then works fine.
var app = angular.module('App', []);
app.controller('AppController', [
'$scope',
'myFactory',
function($scope, myFactory) {
console.log(myFactory)
}]);
app.factory('myFactory', function() {
return 'test';
});
so you just need to decide which one out of those you really want to use.

Getting URL parameters using $route

I have the following url:
http://myurl.dev/users/32
I want to pass the last parameter 32 to a $http.get request but I can't figure out how to pass it.
So far I have this:
var matchmaker = angular.module('matchmaker', ['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.controller('LocationCtrl', ['$scope', '$http', '$location', '$routeParams', '$route', function($scope, $http, $location, $routeParams, $route) {
var id = $route.current.params.id;
console.log(id);
$http.get('http://myurl.dev/services/' + id ).success(function(data)
{
$scope.applicants = data;
});
}]);
In the console it's saying:
Cannot read property 'params' of undefined
Can anyone tell me what I'm doing wrong please?
Edit:
Angular isn't generating the url, it's a server side generated url
Edit 2.0
Here's the config for the routeProvider with actual route parameters:
var matchmaker = angular.module('matchmaker', ['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/matchmaker/locations/:id', {
controller: 'LocationCtrl'
});
$locationProvider.html5Mode(true);
});
Put a console.log($routeParams); in your controller and check its value.
If it is Object {} check if you have a route definition using parameters:
var module = angular.module('ngRouteExample', ['ngRoute']);
module.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/test/:id', {
templateUrl: 'test.html',
controller: 'TestController'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
If so, you will get this output in the console:
Object {id: "42"}
It is because you trying to get value which doesn't exist at that moment, that's how javascript works. You need to specify that you want these values when they are ready using '$routeChangeSuccess' event.
.controller('PagesCtrl', function ($rootScope, $scope, $routeParams, $route) {
//If you want to use URL attributes before the website is loaded
$rootScope.$on('$routeChangeSuccess', function () {
//You can use your url params here
$http.get('http://myurl.dev/services/' + $routeParams.id )
.success(function(data) {
$scope.applicants = data;
});
});
});

Angular JS: $location injection undefined

I'm trying to configure my route in such a way to redirect to the login page if user is not logged. This is my code:
angular.module('witBiz.services', []);
angular.module('witBiz.controllers', ['witBiz.services']);
var witBizModule = angular.module('witBiz', ['ngRoute' , 'witBiz.controllers', 'witBiz.services' ]);
witBizModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {templateUrl: 'resources/views/login.html', controller: 'LoginController'});
$routeProvider.when('/index', {templateUrl: 'resources/views/index.html', controller: 'IndexController'});
$routeProvider.otherwise({redirectTo: 'resources/views/index.html'});
}])
.run(['$rootScope', 'checkLogin', function($rootScope, checkLogin ,$routeProvider ) {
$rootScope.$on('$routeChangeSuccess', function () {
if (checkLogin())
$location.url("/index");
})
}])
.factory('checkLogin', function(){
return function() {
//perform real logic here
return true;
}
})
where basically I declare modules and services. Now the problem is $location is not defined so I get error.
I tried to inject $location as dependency like this but I got undefined injection (injpt):
.run(['$rootScope', 'checkLogin', '$location', function($rootScope, checkLogin ,$location) {
$rootScope.$on('$routeChangeSuccess', function () {
if (checkLogin())
$location.url("/ciao");
})
}])
So I'm wondering how I can use the builtin $location services inside my "run" method...why can I inject it as a dependency as $rootScope or checkLogin?!
I'm using angular 1.2.0 rc2.
Thanks
Here is a working example http://plnkr.co/edit/gf5LhTjqhz4MoZfVcqIt?p=preview
Couldn't reproduce the error with $location not working inside .run

Categories