I want to set controller which name described in scope of another controller
JS file:
.controller('PageCtrl', [
'$http',
'$scope',
'$routeParams',
'$location',
function($http, $scope, $routeParams, $location){
$scope.CurrentPageCtrl = 'CompaniesCtrl';
}])
.controller('CompaniesCtrl', [
'$http',
'$scope',
'$routeParams',
'$location',
function($http, $scope, $routeParams, $location){
console.log('loaded');
}
])
HTML file:
<ng-controller ng-controller = "PageCtrl">
<ng-controller ng-controller = "{{CurrentPageCtrl}}">111</ng-controller>
</ng-controller>
But I get:
Error: [ng:areq] Argument '{{CurrentPageCtrl}}' is not a function, got undefined
The thing is the controller would not be called until it is given in ng-controller in your code. So there is no question of $scope variable to be accessible in your view ie, your html. So you either must use the ngRouter or ui.router for specifying the controller during execution or you must use the global directive as given in the answer of the link below.
Dynamic NG-Controller Name
Related
This is a very common problem apparently when declaring multiple controllers but every fix on this forum that I tried to follow or somewhere else, didn't seem to work (probably am missing something).
I have app.js file and 3 separate controller files and a services file.
I used one of the controllers and everything worked fine. Now I am trying to redirect to another view which handled by ProfileManagement controller, but it is showing the error:
Error: [ng:areq] Argument 'ProfileManagementController' is not a
function, got undefined
This is what I have in the beginning of each controller file and also app.js...
app.js:
var app = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']);
app.run(function($ionicPlatform) {...
and in app.js, I am using this route before the error shows:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'ProfileManagementController'
}
}
})
My controllers are here...
UserAccessController:
app.controller('UserAccessController', ['$scope', '$http', '$state', '$q', '$rootScope', 'CreateUserService', 'UserObjectService', function($scope, $http, $state, $q, $rootScope, CreateUserService, UserObjectService){
and ProfileManagementController:
app.controller('ProfileManagementController', ['$scope', '$http', function($scope, $http){
}]);
Also with tabs project template of ionic framework, I got the file controller.js by default where I commented all controllers but left the first line:
angular.module('starter.controllers', []);
//.controller('ProfileController', function($scope) {})
//
//.controller('OrdersController', function($scope) {
//
//})
//
//.controller('MoreOptionsController', function($scope, $stateParams) {
//
//})
//
//.controller('ConnectionsController', function($scope) {
//
//});
What am I doing wrong here that leads to the error message? (the view actually associated with the route tabs.home actually loads but the console shows the error.
Thanks,
You probably forgot to add the script tag to define your controller within the html.
for example:
<script src="yourController.js"></script>
I have a problem with Angular and injecting $cookies into a controller.
The $cookies is working fine in a service, but with this controller I'm getting an issue.
var app = angular.module('app', [
"ui.router",
"ngCookies",
'ui.bootstrap']);
angular
.module("app")
.controller("ListController", ListController);
ListController.$inject = ['$scope', 'DataService', '$state', "AuthenticationService", "$cookies"];
function ListController($scope, DataService, $state, AuthenticationService, $cookies) {
....
}
The $cookies object is coming through as undefined. The angular-cookies.js is included on the page, and is working inside the included AuthenticationService.
I found my problem:
Someone had cut and pasted the original controller code into a new controller, but neglected to rename the controller on the line:
ListController.$inject =[...];
So, when I came along and added the $cookies parameter, my version was being overridden.
Try this way
var app = angular.module('app', [
"ui.router",
"ngCookies",
'ui.bootstrap']);
angular
.module("app")
.controller("ListController",['$scope', 'DataService', '$state', "AuthenticationService", "$cookies", function ($scope, DataService, $state, AuthenticationService, $cookies) {
....
}]);
Did you include the file angular-cookies[.min].js ?
Also, as a good practice, don't use the same module for the app and the controllers. Have a
angular.module('app', [ 'app.controllers']);
angular.module('app.controllers', [
\\ define each controller here
]);
defined so that you can have clean separation of them.
Are $scope, DateService, $state available in your controller? I usually put this line of code after the declaration of controller
angular
.module("app")
.controller("ListController", ListController);
// <...loading all JS in one file by the Mincer library...>
angular
.module('firstapp', ['ngRoute', 'ngMaterial', 'ngMdIcons'])
.factory('MessagesService', ['$scope', '$filter', '$mdToast', '$animate', MessagesService])
.controller('MenuController', ['$scope', '$filter', '$location', 'MessagesService', MenuController]);
MessagesService is a function;
MenuController is a function;
I received a error: MessagesService is not exists.
If i remove MessagesService dependency from MenuController - it works good.
But i need create Message controller, what will add some toast about application, and dont know, how.
You could never inject $scope dependency inside angular factory
It should be without $scope dependency
.factory('MessagesService', ['$filter', '$mdToast', '$animate', MessagesService])
For some reason my factory is not being injected into the controller as expected.
index.html
<script src="js/app.js"></script>
<script src="js/tagFactory.js"></script>
<script src="js/bluetoothFactory.js"></script>
<script src="js/bluetoothController.js"></script>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
tagFactory.js
angular.module('starter.services', []).factory('decodeFactory', ['$q', '$window', '$rootScope', function($q, $window, $rootScope) {
//.... this is really empty for now.
}])
bluetoothFactory.js
angular.module('starter.services', []).factory('bluetoothFactory', ['$q', '$window', '$rootScope', function($q, $window, $rootScope) { ... }])
bluetoothController.js
angular.module('starter.controllers',[]).controller('bluetoothCtrl', function($scope, $ionicModal, $timeout, bluetoothFactory, decodeFactory) {...});
When running my page in browser I receive the following error:
Error: [$injector:unpr] Unknown provider: decodeFactoryProvider <-
decodeFactory <- bluetoothCtrl
Any help is appreciated.
You are creating the starter.services module twice, which is causing the first one to be overwritten. You either need to give them two different module names or you need to use the getter method, angular.module('starter.services'), for the second one.
It looks like your bluetoothCtrl is in starter.controllers while decodeFactory is in starter.services which is not included in the controller's module. Try:
angular.module('starter.controllers',['starter.services']).controller('bluetoothCtrl',
function($scope, $ionicModal, $timeout, bluetoothFactory, decodeFactory) {...});
I have a simple angular example where I can not get the route paramters for the query string in the URL. How do I do this?
Controller:
appRoot.controller('RegistrationController', ['$scope', '$resource', '$routeParams', function ($scope, $resource, $routeParams) {
if ($routeParams)
debugger;
}]);
Main Configuration File
var appRoot = angular.module('registrationApp', ['ngRoute', 'registration.directives', 'ngResource']); //Define the main module + dependancies
//Sets up AngularJS module and routes and any other config objects
appRoot
.config(['$routeProvider', function ($routeProvider) {
//Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view) - Frigin amaze-balls
$routeProvider
.when('/registration/:inviteToken', { templateUrl: 'registration', controller: 'RegistrationController' })
.otherwise({ redirectTo: '/home' });
}])
.controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
$scope.$on('$routeChangeSuccess', function (e, current, previous) {
$scope.activeViewPath = $location.path();
});
}]);
When I browse to something like http://example.org/registration/?inviteToken=2354234 route paramters is alway an empty object. I have also tried http://example.org/registration#/?inviteToken=2354234
One thing maybe worth noting is that http://example.org/registration is the MVC controller
Can someone help me understand what I'm doing wrong?
In your configuration, you have specified a route like this:
http://example.org/#/registration/2354234
(where $routeParams.inviteToken will be 2354234)
If you want to match a URL like this http://example.org/registration/?inviteToken=2354234, then you need a different route:
/registration/?inviteToken=:inviteToken
I am not usre you are aware of this, but the routes you define refer to the path after the #, unless you are using (and have configured correctly both on the client-side and on the server-side) "HTML 5" mode.