In the below , roles.js file whenever the onSelect function is called if the role is UserRole i'm navigating user to different page
angular.module('myApp.roles', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/roles', {
templateUrl: 'roles/roles.html',
controller: 'PostsCtrl',
selector: 'roles'
});
$routeProvider.when('/footer', {
templateUrl: 'footer/footer.html',
controller: 'footerCtrl'
});
}])
.controller('PostsCtrl', ['$scope', '$rootScope', '$location', function ($scope,
$rootScope, $log, $location) {
$scope.onSelect = function (A, B, C) {
localStorage.setItem("A", JSON.stringify(A));
localStorage.setItem("B", JSON.stringify(B));
localStorage.setItem("C", JSON.stringify(C));
if (role.roleName === "User Role") {
$rootScope.roles = [];
$location.url("/footer");
} else {
$rootScope.mangoes = JSON.parse(localStorage.getItem("B"));
}
};
}]);
I have defined $location in the controller and added it as parameter in function . When i debugged it then i found that $location is undefined. Error is :Cannot read property 'url' of undefined.
You are missing the order while injecting parameters, remove $log from the parameters,
.controller('PostsCtrl', ['$scope', '$rootScope', '$location' ,function ($scope,
$rootScope, $location) {
Related
I have this code:
app.js
var promptoWeb = angular.module('promptoWeb', ['ngMaterial', 'ngAnimate', 'ngMessages',
'ngAria', 'ui.router', 'ui.sortable', 'ngFileUpload']);
(function (app) {
app.factory('env', function () {
var domain = {domain: "http://localhost:8860/Elton"};
return domain;
});
app.config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
function ($stateProvider, $urlRouterProvider, $compileProvider) {
self = this;
$compileProvider.preAssignBindingsEnabled(true);
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
template: '<home-component></home-component>',
component: 'homeComponent',
params: {
selectedFilter: undefined
},
resolve: {
ldapGroup: function (authorizationService) {
return authorizationService.getLdapGroup() === 'WazeAdOps';
}
}
})
}]);
})(promptoWeb);
and home-component.js
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
controller: ['$scope', '$state', function ($scope, $state, ldapGroup) {
var self = this;
self.isFullList = false;
self.ldapGroup = ldapGroup;
self.addVoice = function () {
$state.go("add");
};
$scope.$broadcast('searchNoFilter');
}]
});
})
(promptoWeb);
why do i get an error in home-component that `ldapGroup is undefined?
and if I change to:
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
controller: ['$scope', '$state', 'ldapGroup',function ($scope, $state, ldapGroup) {
I get an error:
Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup
I have also tried:
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
bindings: {
ldapGroup: '<'
},
controller: ['$scope', '$state', function ($scope, $state) {
var self = this;
self.isFullList = false;
$scope.isAdOps = !self.ldapGroup? true : self.ldapGroup;
I get self.ldapGroup === undefined
why do i get an error in home-component that ldapGroup is undefined?
Because you've told Angular to inject $scope and $state, so the third argument of the function is undefined.
controller: ['$scope', '$state', function ($scope, $state, ldapGroup)
I get an error:
Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup
Because there is no service named ldapGroup. ldapGroup is a resolve of your state, which can be injected into the controller of that state. But your state has no controller. It has a component.
How to use components, and how resolves are bound to inputs of the component, is described in the documentation
I am facing problem in call to controller in child ui state router.
URL is changing but controller not call.
no console error*
Please check code:
HTML
<a style="cursor: pointer;" class="btn btn-default btn-xs" ui-sref="interactions.details({id:n.id})">Detail</a>
Router
.state('interactions', {
url: '/interactions',
data: {
pageTitle: 'Interaction',
IsLoginPage: false
},
templateUrl: '../../modules/interaction/views/interaction.html',
controller: 'interactionCtl'
})
.state('interactions.details', {
url:'/details/:id',
data: {
pageTitle: 'Interaction Details',
IsLoginPage: false
},
templateUrl: '../../modules/interaction/views/interactionDetail.html',
controller:'interactionCtlDetails'
}).run(function ($rootScope, settings, $cookies, $http, $location, AuthenticationService, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
Controller
warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
Annotation array should be in sync with the parameters in the function declaration.Here annotation array is not in sync with the parameters in the function declaration.
Second parameter in your annotation array is 'interactionService' but in function, thats 'rootScope'.
Try with below controller code
warApp.controller('interactionCtlDetails', ['$scope', '$rootScope', '$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
In above code you have function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) where you have interactionService which you have missed in your injection section
Simpler example of routing, maybe you can narrow down the problem by adding one controller at a time and build the rest. Fiddle or error will help.
angular.module('myApp').config(function ($stateProvider){
$stateProvider
.state('form', {
url:"/form",
views: {
"listColumn": {
templateUrl: "/form1.html",
controller:'myController1'
},
"formColumn": {
templateUrl: "/form2.html"
}
}
})
});
Definitely your controller should throw an error in console, the order of dependency parameters injected in the controller is wrong, you are missing interactionService
change it as,
warApp.controller('interactionCtlDetails', ["$scope", 'interactionService','$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
});
edit: I'm using bootstrap, I think bootstrap tab is causing the
problem
View does not get updated after $scope variable update.
$scope.codeData
if i console the $scope.codeData, i can see the data, but does not render in view.
I have to click twice to get the view render correctly.
is there anything wrong with my code??
Thank you.
config
angular.module('SPAroutes', ['ngRoute', 'SPAcontrollers', 'SPAdirectives'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/admin', {
templateUrl: 'templates/views/admin.html',
controller: 'adminCtrl',
controllerAs: 'admin'
})
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
Controller.js
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
$scope.codeData = res.data;
console.log($scope.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
admin.html
{{codeData}}
You are mixing up controllerAs with scope as phil mentioned in his comment on question. Instead of using scope here store values insidethis reference something like this.
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
var admin = this;
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
admin.codeData = res.data;
console.log(admin.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
and inside the view: admin.html
{{admin.codeData}}
here is working plunk for your refernce
This is the code I have:
angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
$stateProvider
.state("member", {
url: "/member",
views: {
"" : {
templateUrl: "/js/angular/partials/member/index.html",
controller: 'MemberController'
}
}
});
}).controller(
"MemberController",
["$rootScope", "$scope", "$ocLazyLoad", "$location"],
function ($rootScope, $scope, $ocLazyLoad, $location) {
log("Members controller initialized.");
}
);
I don't like to define the controller directly in the view, because that will make me create a lot of different functions, so I want define the controller once. However it says:
Error: [ng:areq] Argument 'MemberController' is not a function, got string
I've tried change the controller to the very top, in another angular.module("App").controller definition but nothing works. What am I doing wrong?
try changing the location of the closing square bracket ]
.controller(
"MemberController",
["$rootScope", "$scope", "$ocLazyLoad", "$location",
function ($rootScope, $scope, $ocLazyLoad, $location) {
log("Members controller initialized.");
}
]);
I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/