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>
Related
Here is my controller:
(function () {
var app= angular.module('app');
app.controller('recommendedJobsCtrl', ['$scope', function(dataShare,$q,$scope, $ionicSideMenuDelegate,$window,$http,$timeout) {
// passes contents to jobDetails to be rendered and displayed
window.post = function($event, res){
console.log(angular.element($event.target).parent());
dataShare.sendData(res)
}
/**
* handles pagination
*loads first 3 pages
**/
var i=1;
window.result=[];
window.noMoreItemsAvailable=false;
window.loadMore = function()
{
console.log('here')
if(i<4)
{
$http.get( "http://test.website.com/api/search/"+i).success(function(response)
{
i++;
$scope.result=$scope.result.push(response);
console.log(response);
$timeout(function ()
{
$scope.result = response
});
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}else
{
$scope.noMoreItemsAvailable=true;
}
}
]);
}());
I read that my controller was under 'user strict' so it can't access the variables or functions. So I placed the word 'window' to make it global. But now it doesn't access the function because the console won't print. How do I fix this?
Dependency Injection is incorrect:
app.controller('recommendedJobsCtrl', [
'dataShare',
'$q',
'$scope',
'$ionicSideMenuDelegate',
'$window',
'$http',
'$timeout',
function(
dataShare,
$q,
$scope,
$ionicSideMenuDelegate,
$window,
$http,
$timeout) {
// Your code ...
}]);
Your code should be specific to the controller. You should create function and variables either on $scope as in $scope.<functionName> = function() {} and $scope.noMoreItemsAvailable or private to the controller as in function <functionName>() {} or var noMoreItemsAvailable.
In case intention behind using window object is to use same code across controllers, you may put this code in a factory.
Can you help me please?
I want to set controller name which contains in scope of another controller.
JS file:
.controller('PageCtrl', [
'$http',
'$scope',
'$routeParams',
'$location',
function($http, $scope, $routeParams, $location){
switch($routeParams.page) {
case 'companies':
$scope.CurrentPageCtrl = 'CompaniesCtrl';
break;
default:
break;
}
}])
.directive('myPagecontent', function() {
return {
template: '<ng-controller ng-controller = "{{CurrentPageCtrl}}"></ng-controller>'
};
})
HTML file:
<ng-controller ng-controller = "PageCtrl">
<my-pagecontent></my-pagecontent>
</ng-controller>
And I get error:
angular.js:13642 Error: [ng:areq] Argument '{{CurrentPageCtrl}}' is not a function, got undefined
This can be a bit tricky since ng-controller in this case expects an expression that evaluates to a controller constructor function, not to a string that contains the controller name.
One way to solve it is by doing the following:
app.controller('PageCtrl', [
'$http',
'$scope',
'$location',
function($http, $scope, $location) {
$scope.CurrentPageCtrl = Controller1;
}
]);
function Controller1($scope) {
console.log('Controller1');
}
app.controller('Controller1', Controller1);
function Controller2($scope) {
console.log('Controller2');
}
app.controller('Controller2', Controller2);
app.directive('myPagecontent', function() {
return {
template: '<ng-controller ng-controller="CurrentPageCtrl"></ng-controller>'
};
});
Demo: http://plnkr.co/edit/s3yy2fdF5OgBjPcKWikw?p=preview
An alternative solution is to create a directive that runs before everything else, that takes a variable with the controller name, adds ng-controller with the correct value and then remove itselves.
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) {...}
I am trying to modularize my AngularJS application and put some services inside a Module.
Everytime I try to reference my Service there is an error saying:
Unknown provider: UtilsProvider <- Utils <- benutzerUebersichtController
My code is:
var utils = angular.module('Utils',[]);
utils.service('UtilsService', function () {
this.CurrentUser = 'Hello World';
});
var verwaltungApp = angular.module('verwaltungApp', ['Utils'])
verwaltungApp.controller('benutzerUebersichtController', ['$scope', '$http', '$filter','Utils', benutzerUebersichtController]);
function benutzerUebersichtController($scope, $http, UtilsService) {
$scope.Test = UtilsService.CurrentUser;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="verwaltungApp">
<div ng-controller="benutzerUebersichtController">
<span>{{Test}}</span>
</div>
</div>
You din't inject the service in your controller properly.
This :
verwaltungApp.controller('benutzerUebersichtController', ['$scope', '$http', '$filter','Utils', benutzerUebersichtController]);
function benutzerUebersichtController($scope, $http, UtilsService) {
$scope.Test = UtilsService.CurrentUser;
};
should be:
verwaltungApp.controller('benutzerUebersichtController', ['$scope', '$http', '$filter','UtilsService', benutzerUebersichtController]);
function benutzerUebersichtController($scope, $http,$filter, UtilsService) {
$scope.Test = UtilsService.CurrentUser;
};
You are injecting this services in your controller:
['$scope', '$http', '$filter','Utils']);
But you are passing only these services:
function benutzerUebersichtController($scope, $http, UtilsService)
So your UtilsService is now your $filter inside your controller.
To correct you have to change to this.
function benutzerUebersichtController($scope, $http, $filter, UtilsService)
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.