I would like to update some fields when I receive a geoposition for a give user.
Until know I have the following code:
http://jsfiddle.net/VSph2/10/
Firstly, I get a Error: Unknown provider: positionProvider <- position (only on jsfiddle). I do not get this error on my real site.
The problem is that when I get the position I update the position object in the service but it does not update in the HTML view.
Any suggestions?
Try this. Fiddle
var test = angular.module('myApp', []);
var services = angular.module('myApp.services', []);
services.factory('position', ['$http', function ($http) { ...
should be
var test = angular.module('myApp', []);
test.factory('position', ['$http', function ($http) { ...
You should update the controller code as this, to use a callback function and $apply to apply the value set to the scope.
position.getPosition(function (p) {
$scope.$apply(function () {
$scope.position.latitude = p.coords.latitude;
$scope.position.longitude = p.coords.longitude;
$scope.position.accuracy = p.coords.accuracy;
});
});
Related
Here's the script I'm using :
(function() {
var app = angular.module("myQuiz", []);
app.controller('QuizController', ['$scope', '$http', '$sce', function($scope, $http, $sce){
$scope.score = 0;
$scope.activeQuestion = -1;
$scope.activeQuestionAnswered = 0;
$scope.percentage = 0;
$http.get('quiz_data.json').then(function(quizData){
$scope.myQuestions = quizData.data;
$scope.totalQuestions = $scope.myQuestions.length;
});
}])
})
After this, I'm trying to display the 'total questions' on my HTML using {{totalQuestions}} but instead of showing the number of questions, it just displays {{totalQuestions}} as it is.
You have this in code:
(function() {
var app = angular.module("myQuiz", []);
// ..
})
But this will never actually execute the function, so your module won't be defined.
Just add the () at the end:
(function() {
var app = angular.module("myQuiz", []);
// ..
}())
Try renaming <div id="myQuiz"> to something else it can not be same as ng-app="myQuiz" and define your scope variable inside <div id="myQuizId" ng-controller = 'QuizController'> {{hereYourVariable}} </div>
Add these things in your index.html file :
ng-app = "myQuiz",
ng-controller="QuizController" if required,
add reference to your angular js cdn or its script file
then below angular cdn/script reference add your script file reference.
I have a problem in AngularJS, to test a html div with a dynamic value when I use controller's alias
Here my code
<div id="title_contract" class="caption">{{ ctrl.detail_title }}</div>
where crtl is the ContractController's alias.
My test is
describe('Testing create new or open detail contract', function() {
var template, ctrl, scope;
beforeEach(inject(function ($controller, $compile) {
scope = $rootScope.$new();
ctrl = $controller('ContractController', {$scope: scope});
var element = angular.element('<div id="title_contract" class="caption">{{ ctrl.detail_title }}</div>');
template = $compile(element)(scope);
}));
it('should prepare variable to create new contract', function () {
ctrl.create_clicked();
scope.$digest();
var templateAsHtml = template.html();
expect(templateAsHtml).toContain('New Contract');
});
}
MyController is
PageApp.controller('ContractController', function($rootScope, $scope ) {
var vm = this;
vm.create_clicked = doCreate;
vm.title_detail = '';
function doCreate() {
vm.detail_title = 'New Contract';
}});
When I call create_clicked the title in vm change its value but test fails 'cos the div value is empty.
I try to use $scope (so without alias) and it works.
But I'd like to use alias approach.
Did somebody encounter this problem?
Thanks' in advance
Try:
ctrl = $controller('ContractController as ctrl', {$scope: scope});
See $controller documentation:
The string can use the controller as property syntax
It is a bit difficult for me to figure out the examples since I am a beginner could someone please help.
This is my code simple anjular.js service call
var app = angular.module('myApp', []);
var mycontroller = app.controller('Myctrl', function($scope, $http) {
$http.get("service.json")/*the json that i pass*/
.success(function(response) {$scope.names = response.records;});
});
I want to test this code using jasmine. What is the procedure and the code to do it.
You can use httpBackend mock service that will help to test your service.
Example-
describe('Myctrl', function() {
var $httpBackend, scope, createController, authRequestHandler;
// Set up the module
beforeEach(module('MyApp'));
beforeEach(inject(function($injector) {
// Set up the mock http service responses
$httpBackend = $injector.get('$httpBackend');
// backend definition common for all tests
authRequestHandler = $httpBackend.when('GET', 'service.json')
.respond(true);
// Get hold of a scope (i.e. the root scope)
$rootScope = $injector.get('$rootScope');
// The $controller service is used to create instances of controllers
var $controller = $injector.get('$controller');
createController = function() {
return $controller('MyController', {'$scope' : scope});
};
})
);
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should fetch authentication token', function() {
$httpBackend.expectGET('service.json');
var controller = createController();
expect(scope.names).toBe(true);
$httpBackend.flush();
});
});
Is it possible to load JSON data without callback function in AngularJS? If I manually download the json file and change the url to 'phones/phones.json'. In jQuery it is possible http://www.sitepoint.com/jsonp-examples/
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('https://raw.githubusercontent.com/angular/angular-phonecat/master/app/phones/phones.json').success(function(data) {
$scope.phones = data.splice(0, 5);
});
$scope.orderProp = 'age';
}]);
SOLVED: Thanks! I changed "raw.githubusercontent.com/angular/angular-phonecat/master/app/phones/phones.json" to "rawgit.com/angular/angular-phonecat/master/app/phones/phones.json"
See https://rawgit.com/faq
It was server side problem as Words Like Jared said.
The problem is not with your client but with your server.
http://plnkr.co/edit/a7K79KTae3CPPZx7XMfH?p=preview
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
That's virtually the same code pointed to a different URL and it works.
I think you need the HTTP request's response to contain the "Access-Control-Allow-Origin" header with a value of say "*" to access the content from another site. How to do that will vary depending on your server technology.
I am working on a little app and I have a service that goes and gets some data and returns it as JSON. I am able to display that data in my HTML just fine. But if I try define a new $scope variable from part of the data that came back the newly defined variable is undefined. Any help would be greatly appreciated. Here is a bit of my code:
kanban.controller('WorkRequestController', function ($scope, $routeParams, workRequestService, workTypeService){
$scope.init = function(){
$scope.workRequest = workRequestService.getWorkRequest($routeParams.cardId);
$scope.workTypes = workTypeService.getAllWorkTypes();
$scope.id = $scope.workRequest.id;
};
$scope.submit = function(){;
console.log($scope.id);
};
});