I have an angular module with the following code:
angular.module('sampleModule', [])
.service('myService', [function () {
this.showAlert = function () {
alert("Hello");
};
this.sum = function (a, b) {
return a + b;
};
}])
.controller('SampleCtrl', ['myService', '$scope', function ($scope, myService) {
this.doSum = function () {
var result = myService.sum(1, 2);
alert(result);
};
}]);
When I invoke doSum I get:
TypeError: myService.sum is not a function
Any ideas? Thanks!
Your controller DI is wrong- note the order of the arguments:
.controller('SampleCtrl', ['$scope', 'myService', function ($scope, myService) {
this.doSum = function () {
var result = myService.sum(1, 2);
alert(result);
};
}]);
Issue with sequencing of injections are not proper. $scope should come before myService.
Correct code:
.controller('SampleCtrl', ['$scope', 'myService', function ($scope, myService) {
this.doSum = function () {
var result = myService.sum(1, 2);
alert(result);
};
}]);
Related
I have a factory:
myService:
'use strict';
app.factory('myService', ['$resource', 'ngAuthSettings', function ($resource, ngAuthSettings) {
var serviceBase = ngAuthSettings.apiServiceBaseUri;
return $resource(serviceBase + 'api/category/', {}, {
update: {
method: 'PUT'
},
getAllByCategory: {
url: serviceBase + 'api/category/GetAllByCategory',
method: 'GET', isArray: true
}
});
}]);
Then I have a controller:
searchController:
'use strict';
app.controller('searchController',
['ngAuthSettings', '$scope', 'myService', '$routeParams', '$location',
function (ngAuthSettings, $scope, myService, $routeParams, $location) {
function init() {
var search = $location.search();
var keywords = search.keywords;
var model = myService.getAllByCategory({ categoryId: 2, page: $routeParams.page });
$scope.categoryAds = model.ads;
$scope.bigTotalItems = model.totalCount;
$scope.maxSize = ngAuthSettings.maxPagingSize;
}
init();
}]);
Why my model.ads is always undefined? Isn't this the right way to call $resource custom method in controller?
As response may take some time but you are adding assignment very immediatly hence it happening put it in promise/action after resource,
'use strict';
app.controller('searchController', ['ngAuthSettings', '$scope', 'myService', '$routeParams', '$location',
function (ngAuthSettings, $scope, myService, $routeParams, $location) {
function init() {
var search = $location.search();
var keywords = search.keywords;
var model = myService.getAllByCategory({ categoryId: 2, page: $routeParams.page },
function() {
$scope.categoryAds = model.ads;
$scope.bigTotalItems = model.totalCount;
$scope.maxSize = ngAuthSettings.maxPagingSize;
}
);
}
init();
}
]);
Can't seem to get this factory to work properly.
I'm trying to do the $http requests from a factory.
But I'm getting this error of:
TypeError: PassFactory.setNewPass is not a function
Below is the code:
Factory
(function () {
angular
.module("myApp")
.factory('PassFactory', ['$http', function ($http) {
/*
var passFactory = {};
passFactory.setNewPass = function (newpass, user) {
return $http.post('/password/' + newpass, user, function (response) {
});
};
*/
return {
setNewPass: function (newpass, user) {
return $http.post('/password/' + newpass, user, function (response) {
});
}
};
}])
})();
Controller
(function () {
angular
.module("myApp")
.controller('PCtrl', ['$scope', '$location', '$rootScope', 'PassFactory', setHome]);
function setHome($scope, $location, PassFactory) {
$scope.login = function (user) {
if (user.newpassword == user.newpasswordconfirm) {
PassFactory.setNewPass(user.newpassword, user).then(function (response) {
$location.path("/");
});
}
};
}
})();
You have missed $rootScope in controller factory function. Always make sure the the order in dependency have been injected inside DI array, in same sequence you should ask for their instance inside its factory function.
angular
.module("myApp")
.controller('PCtrl', ['$scope', '$location', '$rootScope', 'PassFactory', setHome]);
//added $rootScope in 3rd place
function setHome($scope, $location, $rootScope, PassFactory) {
I looked into examples on how to do this properly but it's definitely not updating on my end. I put a breakpoint to make sure it's updating and going through the timer in the Factory and it's updating properly. I shouldn't have to use $watch right? If someone can help me figure out what's going on it would help with my headache right now lol thanks.
Factory
app.factory('FoundationSystemStatusFactory', ['$timeout', '$q', 'SystemStatusFactory', function ($timeout, $q, SystemStatusFactory) {
var service = {};
service.Count = 0;
service.Ping = 0;
service.PollingTest = function() {
$timeout(function () {
SystemStatusFactory.PingIP('www.google.com')
.then(function (data) {
service.Ping = data.data;
service.Count++;
}, function (data) {
service.Ping = data.data;
});
service.PollingTest();
}, 2000);
}
return service;
}]);
Controller
FoundationSystemStatusFactory.PollingTest();
$scope.ping = FoundationSystemStatusFactory.Ping; //NOT UPDATING
$scope.count = FoundationSystemStatusFactory.Count; //NOT UPDATING
EDIT: tried as Service, still couldn't get it to work:
var self = this;
self.Count = 0;
self.Ping = 0;
self.PollingTest = function () {
$timeout(function () {
SystemStatusFactory.PingIP('www.google.com')
.then(function (data) {
self.Ping = data.data;
self.Count++;
}, function (data) {
self.Ping = data.data;
});
self.PollingTest();
}, 2000);
}
A different approach - events.
app.factory('FoundationSystemStatusFactory', ['$rootScope', '$timeout', '$q', 'SystemStatusFactory', function ($rootScope, $timeout, $q, SystemStatusFactory) {
var service = {
Count: 0
};
service.PollingTest = function() {
$timeout(function () {
SystemStatusFactory.PingIP('www.google.com')
.then(function (data) {
$rootScope.$broadcast('FoundationSystemStatus:ping', data.data);
service.Count++;
}).catch(function (data) {
$rootScope.$broadcast('FoundationSystemStatus:ping', data.data);
});
service.PollingTest();
}, 2000);
}
return service;
}]);
//On controller...
$scope.$on('FoundationSystemStatus:ping', function(ping){
$scope.ping = ping;
});
You can use watcher:
$scope.$watch('FoundationSystemStatusFactory.Ping', function(newValue) {
$scope.ping = newValue;
});
Or you can use reference to factory:
$scope.status = FoundationSystemStatusFactory;
$interval(function() {
console.log($scope.status.Ping); // gets updated
});
Okay I found out how to do it after some more research. Objects are referenced as numbers and strings are not.
Factory
app.factory('FoundationSystemStatusFactory', ['$timeout', '$q', 'SystemStatusFactory', function ($timeout, $q, SystemStatusFactory) {
var service = {};
service.Data = {
Count: 0,
Ping: 0
}
service.PollingTest = function() {
$timeout(function () {
SystemStatusFactory.PingIP('www.google.com')
.then(function (data) {
service.Data.Ping = data.data;
service.Data.Count++;
}, function (data) {
service.Data.Ping = data.data;
});
service.PollingTest();
}, 2000);
}
return service;
}]);
Controller
app.controller('SystemStatusController', ['$scope', '$rootScope', '$timeout', 'FoundationSystemStatusFactory',
function ($scope, $rootScope, $timeout, FoundationSystemStatusFactory) {
FoundationSystemStatusFactory.PollingTest();
$scope.data = FoundationSystemStatusFactory.Data;
}]);
View
{{data.Ping}}
{{data.Count}}
since I've been staring at this problem for some days now, I'm kinda new at AngularJS, I thought maybe someone here could help me. So to my problem:
I get a Typeerror when i try to save a new topic on a forum I'm creating: My controller
module.controller('newTopicController', ['$scope', '$http', 'dataService', function ($scope, $http, $window, dataService) {
$scope.newTopic = {};
$scope.save = function () {
dataService.addTopic($scope.newTopic)
.then(function () {
$window.location = "/#";
},
function () {
alert("couldnt save topic");
});
};
}]);
And my factory:
module.factory("dataService", function ($http, $q) {
var _topics = [];
var _isInit = false;
var _isReady = function () {
return _isInit;
};
var _getTopics = function () {
var deferred = $q.defer();
$http.get("/api/topics?withReplies=true")
.then(function (result) {
angular.copy(result.data, _topics);
_isInit = true;
deferred.resolve();
},
function () {
deferred.reject();
});
return deferred.promise;
};
var _addTopic = function (newTopic) {
var deferred = $q.defer();
$http.post("/api/topics", newTopic)
.then(function (result) {
var createdTopic = result.data;
_topics.splice(0, 0, createdTopic);
deferred.resolve(createdTopic);
},
function () {
deferred.reject();
});
return deferred.promise;
};
return {
topics: _topics,
getTopics: _getTopics,
addTopic: _addTopic,
isReady: _isReady
};
});
So when i try to add a topic to the forum I just get "TypeError: Cannot read property 'addTopic' of undefined" in the controller, right where dataService.addTopic($scope.newTopic) is.
I also have another controller who also uses the factory, but that shouldnt be a problem right?
Thanks for your time.
This seems incorrect:
module.controller('newTopicController', ['$scope', '$http', 'dataService', function ($scope, $http, $window, dataService) {...}
Change it to:
module.controller('newTopicController', ['$scope', '$http', '$window', 'dataService', function ($scope, $http, $window, dataService) {...}
In a nutshell, I'm using an AngularJS service in both a directive and a controller. When a change to a service value is performed in the controller that value does not update in the directive. What am I missing here?
I tried adding a watch on the directive's scope.value but it's not actually changing.
var myApp = angular.module('myApp', [])
.directive('myDirective', function (myService) {
return {
controller: function ($scope, myService) {
angular.extend($scope, myService);
},
scope: {},
template: 'Directive: <select ng-model="absValue" ng-options="r for r in absRange()"></select> {{absValue}}'
};
})
.service('myService', function () {
return {
absRange: function () {
var value = this.value;
return range(2 * this.value + 1).map(function (r) { return r - (value + 1); });
},
absValue: 0,
value: 3
};
});
function myController($scope, myService) {
this.range = range(5);
angular.extend(this, myService);
}
Here's the plunk: http://plnkr.co/edit/oAlzJ5gNQ4uXaJV2Bh9z?p=preview