I have the following in a controller.
$rootScope.$on('progressbarEvent', function (event, data) {
$rootScope.progresscurrent = data.currentprogress;
console.log('Event listening: ' + $rootScope.progresscurrent);
});
I have this in a factory service.
$rootScope.$emit('progressbarEvent', dataFactory.currentprogress);
$on is returned undefined. Anyone knows the cause of this?
My controller is:
app.controller('indexcontroller', ['$rootScope','$scope', '$http', 'dataFactory',
function ($scope,$http,$rootScope, dataFactory) {
The order of dependencies has to be consistent with the array it was declared in:
app.controller('indexcontroller', ['$rootScope','$scope', '$http', 'dataFactory',
function ($rootScope, $scope, $http, dataFactory) {
Related
I want to send data from one controller to another at a certain point. I have looked at the docs and googled before for solutions before posting. But can`t seem to get it to work properly.
I know $emit is for sending events up the scope hierarchy and $braodcast is for telegraphing downwards.
var app = angular.module('App.Controllers', ['ui.bootstrap'])
.controller('FordelaPaBetankandeCtrl',
['$rootScope', '$scope',
function ($rootScope, $scope) {
$scope.$on("delatYrkande", function (selectedValue) {
});
}])
.controller('UtskottCtrl',
['$rootScope', '$scope'
function ($rootScope, $scope) {
}])
.controller('TidlinjeCtrl',
['$rootScope', '$scope'
function ($rootScope, $scope) {
}])
.controller('UserInfoCtrl', ['$scope',
function ($scope){
}])
.controller('VisaSammantradesplanCtrl', ['$rootScope', '$scope',
function ($rootscope, $scope) {
}])
.controller('HanteraGrunddokumentCtrl',
['$rootScope', '$scope',
function ($rootScope, $scope) {
$scope.Emit = function (selectedValue) {
$scope.$emit("delatYrkande", selectedValue);
}
}]);
One approach is to broadcast from $rootScope:
$scope.Emit = function (selectedValue) {
̶$̶s̶c̶o̶p̶e̶.̶$̶e̶m̶i̶t̶(̶"̶d̶e̶l̶a̶t̶Y̶r̶k̶a̶n̶d̶e̶"̶,̶ ̶s̶e̶l̶e̶c̶t̶e̶d̶V̶a̶l̶u̶e̶)̶;̶
$scope.$root.$broadcast("delatYrkande", selectedValue);
}
For more information, see
AngularJS Developer Guide - Scope Events Propagation
AngularJS scope API Reference - $root
AngularJS scope API Reference - $broadcast
I have a simple angularjs application and I would like to make http request, but I really don't know why it is not working. Here is my controller:
(function () {
'use strict';
/**
* #ngdoc function
* #name app.controller:HomeCtrl
* #description
* # HomeCtrl
* Controller of the app
*/
angular.module('BlurAdmin.pages.dashboard')
.controller('HomeCtrl', ['$scope', '$rootScope', '$stateParams', '$http', '$location', HomeCtrl ]);
function HomeCtrl($scope, $http, $location) {
$scope.samples = [['a', 'b', 'c'], ['d', 'e', 'f']];
console.log($http);
console.log($scope);
console.log($location);
console.log(window.location.hostname);
$http.get(
'http://localhost' + ':7000/samples',
{}
).then(function(err, data){
if (err){
console.log(err);
}
console.log(data);
},
function(err, data){
});
var varApplist = this;
}
})();
I my patial homeCtrl:
<div id="page-wrapper" ng-controller="HomeCtrl">
......
<div>
in my index.html
when I try to run, I am having this error:
TypeError: $http.get is not a function
at new HomeCtrl (http://localhost:4001/app/pages/dashboard/home/homeCtrl.js:21:11)
at invoke (http://localhost:4001/bower_components/angular/angular.js:4570:17)
at Object.instantiate (http://localhost:4001/bower_components/angular/angular.js:4578:27)
at http://localhost:4001/bower_components/angular/angular.js:9460:28
at http://localhost:4001/bower_components/angular-ui-router/release/angular-ui-router.js:4081:28
at invokeLinkFn (http://localhost:4001/bower_components/angular/angular.js:9099:9)
at nodeLinkFn (http://localhost:4001/bower_components/angular/angular.js:8586:11)
at compositeLinkFn (http://localhost:4001/bower_components/angular/angular.js:7975:13)
at publicLinkFn (http://localhost:4001/bower_components/angular/angular.js:7855:30)
at updateView (http://localhost:4001/bower_components/angular-ui-router/release/angular-ui-router.js:4021:23) <div ui-view="" class="ng-scope">
when I log $location and $http, I have and empty object.
.controller('HomeCtrl', ['$scope', '$rootScope', '$stateParams', '$http', '$location', HomeCtrl ]);
function HomeCtrl($scope, $http, $location) {
Except for $scope, the actual parameters of your function don't match, at all, with the dependencies declared at the beginning of the array.
Do yourself a favor, and stop using this ugly and bug-prone array notation. Use ng-annotate to make your code minifiable automatically.
Also note that the callback passed to then() will be called with a single argument. So the data argument you have there is useless.
need to match your dependency injection sequence with the string values
.controller('HomeCtrl', ['$scope', '$rootScope', '$stateParams', '$http', '$location',
function HomeCtrl($scope, $rootScope,$stateParams, $http, $location) {
When you are initializing the angular module, need to add empty squire brackets for the module injection
angular.module('BlurAdmin.pages.dashboard',[])
also remove err in your promise (then)
.then(function(data) {
console.log(data); // success response
},
function(data) {
console.log(data); // error resoponse
});
full controller
(function () {
'use strict';
angular.module('BlurAdmin.pages.dashboard',[])
.controller('HomeCtrl', ['$scope', '$rootScope', '$stateParams', '$http', '$location',
function HomeCtrl($scope, $rootScope,$stateParams, $http, $location) {
$scope.samples = [['a', 'b', 'c'], ['d', 'e', 'f']];
console.log($http);
console.log($scope);
console.log($location);
console.log(window.location.hostname);
$http.get(
'http://localhost' + ':7000/samples',
{}
).then(function(data){
console.log(data);
},
function(err){
console.log(err);
});
var varApplist = this;
}])
})();
i want to test functions in angular js using jasmine. i have created one controller in which one scope function which is given below.
app.controller('NavigationCtrl', ['$scope', '$route', '$rootScope', function ($scope, $route, $rootScope) {
$scope.title="Hello World";
$scope.testMe = function () {
$scope.title = "Welcome";
}
}]);
Also, i want to call above controller function i.e $scope.testMe from another controller using jasmine test case. so, i create another controller and try to call functions from this controller.
app.controller('RunTestCaseCtrl', ['$scope', '$http', '$location', '$route', '$routeParams', '$rootScope', '$timeout', 'MDT_Constant', function ($scope, $http, $location, $route, $routeParams, $rootScope, $timeout, MDT_Constant) {
describe('mycontroller', function () {
beforeEach(module('app'));
it('scopeTestSpec',
inject(function ($controller, $rootScope) {
var $scope = $rootScope.$new();
$controller('NavigationCtrl', {
$scope: $scope
});
$controller.testMe();
expect($scope.title).toEqual('Welcome');
console.log('ok');
}));
});
}]);
this will give the error "module is not defined".
so, how can i call controller method from another controller using jasmine test
Declared a Service
calculator_app.service('FullPath', function () {
this.full_path = function (pt, pg, prt, cd,scpe) {
-- some logic---
};});
Declared the Controller
calculator_app.controller("Opportunity_Controller", ['$scope', '$http', 'ngDialog', 'FullPath', 'FillOpportunity', function ($scope, FullPath, FillOpportunity, $http, ngDialog) {
$scope.find_path = function () {
$scope.result_path = FullPath.full_path($scope.res_pt, $scope.res_pg, $scope.res_prt, $scope.res_cd, $scope);
}]);
The line FullPath.full_path is throwing error as FullPath is undefined....
Dependencies order should be same, the way you have injected in DI array, basically you had mismatch in injection of dependency sequence.
calculator_app.controller("Opportunity_Controller", ['$scope', '$http', 'ngDialog', 'FullPath', 'FillOpportunity',
//corrected sequence of dependencies below
function ($scope, $http, ngDialog, FullPath, FillOpportunity) {
i'm a new in Angular. I try create factory but got an Error: AuthFactory.getUserInfo is not a function. Could somebody help me?
My Code:
auth.factory.js:
angular.module('tsg').factory('AuthFactory', function() {
return {
getUserInfo: function getUserInfo(){
console.log("AuthFactory.getUserInfo()");
return "userInfo";
}
};
});
header.js:
angular.module('tsg').controller('HeaderCtrl',HeaderCtrl);
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $cookieStore, AuthFactory)
{
AuthFactory.getUserInfo();
$scope.username = "UserName123";
$scope.date = new Date();
};
When you do a DI , their sequence really matters
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $cookieStore, AuthFactory)
the sequence of parameters is incorrect.
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $cookieStore, AuthFactory)
in your case AuthFactory instance inside your controller is not the factory you have written. It is the instance of $location service. You have misplaced it in the injection sequence.
When you do dependency injection follow the correct order of it as follows:
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $rootScope,$location,$cookieStore, AuthFactory)
now you factory will work as you expected.