I defined a constant 'ngGPlacesDefaults' which sets default values of 'google place search' config file. But now I want to change the values of defaults dynamically i.e types:['airport'], types['backery'] etc as needed. And for this I injected the above constant inside my controller and tried to set defaults from inside my controller. But it's not working I mean It's not changing the values.
I am providing code for config file, constant and controller.
Any help would be much appreciated!!
map config code->
app.config(function(ngGPlacesAPIProvider, ngGPlacesDefaults){
ngGPlacesAPIProvider.setDefaults(ngGPlacesDefaults);
});
app.constant code->
app.constant('ngGPlacesDefaults', {
radius:1000000,
types:['shoe_store'],
nearbySearchKeys: ['name','geometry', 'reference'],
placeDetailsKeys: ['name','formatted_address', 'formatted_phone_number',
'reference', 'website', 'geometry', 'email']
});
controller code ->
app.controller('scdfindCustomerCtrl',function($scope,ngGPlacesAPI,$http,ngGPlacesDefaults){
ngGPlacesDefaults.types = ["electronics_store"];
$scope.getDetails = function(ref){
$scope.details = ngGPlacesAPI.placeDetails({reference:ref}).then(
function (data) {
$scope.det=data;
console.log(data);
return data;
});
}
$scope.positions = [{lat:37.7699298,lng:-122.4469157}];
$scope.addMarker = function(event) {
var ll = event.latLng;
$scope.positions.push({lat:ll.lat(), lng: ll.lng()});
$scope.data = ngGPlacesAPI.nearbySearch({latitude:ll.lat(), longitude:ll.lng()}).then(
function(data){
$scope.person=data;
console.log(data);
return data;
});
}
....some more code...
});
In current scenario I want this code to show the list of 'electronics_store' but It's showing list of 'shoe_store'.
Related
I want to get ‘refusalComment’ from my form (when i write some value into it ) but i can’t make this operation every time i deploy project i got this error:
ReferenceError: variableValue is not defined
at Array.eval (eval at (camunda-tasklist-ui.js?bust=7.8.0:5), :27:84)
here is my code example:
<form role=“form”>
var selectedDocuments=$scope.selectedDocuments=[];
var variableManager=camForm.variableManager;
var json=$scope.json={
id:1,
cardNumber:“12345678”,
organizationNameGE:“ptp”,
organizationNameEN:“psp”
};
$scope.selectedDocuments.push($scope.json);
camForm.on('form-loaded', function() {
// declare a 'json' variable 'customer'
camForm.variableManager.createVariable({
name: 'selectedDocuments',
type: 'String',
value: $scope.selectedDocuments
});
});
var comments = $scope.comments=[];
comments.length =$scope.selectedDocuments.length ;
camForm.on('variables-fetched', function() {
// value has been fetched, bind to $scope.user
$scope.refusalComment = $( '#refusalComment', camForm.formElement).textContent(variableValue);
console.log( $scope.refusalComment+"see comment");
$scope.selectedDocuments=EnrichValue(variableManager.variable('selectedDocuments').value,$scope.refusalComment);
});
camForm.on('submit', function(evt) {
// set value in variable manager so that it can be sent to backend
variableManager.variableValue('selectedDocuments', $scope.selectedDocuments);
});
function EnrichValue(data,comment){
for(var i=0;i<Object.keys(json).length;i++){
json[i].comment=comment;
comments[i]=comment;
}
return json;
}
what should i change to make to get rid of this error?
I need to change the order of scope, save but me back an error that save() is not a function.
I'm using restangular to create the objects.
The function is triggered Onsort, I tried using http, but also gives me error.
$scope.onChange = function() {
ApiRestangular.all($scope.section).getList($scope.query).then(function(res){
$scope.items = res;
order = ApiRestangular.copy(res);
console.log(order);
$scope.sortOptions = {
animation : 150,
onSort: function(){
order.put().then(function(){
toast.msgToast($scope.section+ ' ...Ordem atualizada!');
});
}
};
});
};
I am using googlePlace api in angularJs and I want to change type of places dynamically as needed. Like I use controllers to bind the values in view part using $scope but it's not working in this situation also tried $rootScope.
Tried many other things too but they all are not working and I'm also new to angularJs so don't know much.
Here is code:-
app.config(function(ngGPlacesAPIProvider){
ngGPlacesAPIProvider.setDefaults({
radius:1000000,
types:['electronics_store','bakery','bank','beauty_salon','bicycle_store','book_store','cafe','car_dealer','car_wash','car_repair','clothing_store','dentist','department_store'],
nearbySearchKeys: ['name','geometry', 'reference'],
placeDetailsKeys: ['name','formatted_address', 'formatted_phone_number',
'reference', 'website', 'geometry', 'email'],
});
});
Controller code:-
app.config(function(ngGPlacesAPIProvider, ngGPlacesDefaults){
ngGPlacesAPIProvider.setDefaults(ngGPlacesDefaults);
});
app.controller('scdfindCustomerCtrl',function($scope,ngGPlacesAPI,$http,ngGPlacesDefaults){
ngGPlacesDefaults.types = ["atm"];
$scope.getDetails = function(ref){
$scope.details = ngGPlacesAPI.placeDetails({reference:ref}).then(
function (data) {
$scope.det=data;
console.log(data);
return data;
});
}
$scope.positions = [{lat:37.7699298,lng:-122.4469157}];
$scope.addMarker = function(event) {
var ll = event.latLng;
$scope.positions.push({lat:ll.lat(), lng: ll.lng()});
$scope.data = ngGPlacesAPI.nearbySearch({latitude:ll.lat(), longitude:ll.lng()}).then(
function(data){
$scope.person=data;
console.log(data);
return data;
});
}
So basically I want to change "types:[]" array from view part.
Any help would be appreciated.
You could have those set of default values as an constant, so that you could get those value inside config phase directly, as angular constants are accessible over there & in all other component of angular like controller, factory, directive, etc just by injecting dependency of it.
Constant
app.constant('ngGPlacesDefaults', {
radius:1000000,
types:['electronics_store','bakery','bank','beauty_salon','bicycle_store','book_store','cafe','car_dealer','car_wash','car_repair','clothing_store','dentist','department_store'],
nearbySearchKeys: ['name','geometry', 'reference'],
placeDetailsKeys: ['name','formatted_address', 'formatted_phone_number',
'reference', 'website', 'geometry', 'email'],
});
})
Config
app.config(function(ngGPlacesAPIProvider, ngGPlacesDefaults){
ngGPlacesAPIProvider.setDefaults(ngGPlacesDefaults);
});
Whenever you wanted to change the value of ngGPlacesDefaults configuration, you can have handle to those value by injecting ngGPlacesDefaults dependency
app.controller('myController', function($scope, ngGPlacesDefaults){
//other code here
ngGPlacesDefaults.types = ["some", "different", "values"]; //you could change value like this
})
I found a different way to solve this problem. You don't need to extra just pass the types:[] as an argument in 'nearBySearch' function
$scope.data = ngGPlacesAPI.nearbySearch({latitude:ll.lat(), longitude:ll.lng(), types:[$scope.business.selected.businessType]}).then(
function(data){
$scope.person=data;
console.log(data);
return data;
});
"$scope.business.selected.businessType" is bindable dynamically from view, that's it.
I have two controllers and one Factory. I am using angular-devise module for authentication.
UserFactory.js
myApp.factory('Userfactory', function(Auth,$location){
var Userfactory = {}
Userfactory.user = []
Userfactory.active = false
Userfactory.isLogged = function(){
if(!Userfactory.active[0]){
return Auth.currentUser().then(function(user) {
Userfactory.user.push(user)
Userfactory.active = angular.copy(true)
}, function(error) {
});
}
}
return Userfactory;
})
UserController.js
myApp.controller("userController",function($scope,Userfactory){
Userfactory.isLogged().then(function(){
$scope.active = Userfactory.active;
})
}
NavController.js
myApp.controller("navController", function navController(Userfactory){
this.user = Userfactory.user;
this.active = Userfactory.active;
})
UserFactory.active in nav controller is not updating when isLogged updates the value , since the value is getting resetted (which breaks binding) , where as in user controller the value is assigned through promise , so its getting the latest value. My doubt is how to manage to get it working in both places, meaning how to assign value without breaking the binding.
One workaround is declaring Userfactory.active as an array and pushing the value to it as true or false, but looking for better way of doing it, any help will be useful.
I would recommend you to use a model Object to wrap all the variables/properties you need to be bindable.
myApp.factory('Userfactory', function(Auth,$location){
var Userfactory = {}
Userfactory.model = {
user: undefined,
active: false
};
Userfactory.isLogged = function(){
if(!Userfactory.active[0]){
return Auth.currentUser().then(function(user) {
Userfactory.model.user = user;
Userfactory.model.active = true;
}, function(error) {
});
}
}
return Userfactory;
})
And then on your controllers:
myApp.controller("userController",function($scope,Userfactory){
Userfactory.isLogged().then(function(){
$scope.userModel = Userfactory.model;
// and on the UI use: userModel.active
})
}
myApp.controller("navController", function navController(Userfactory){
this.userModel = Userfactory.model;
// then access it like: this.userModel.active
})
App design question. I have a project which has a very large number of highly customized inputs. Each input is implemented as a directive (and Angular has made this an absolute joy to develop).
The inputs save their data upon blur, so there's no form to submit. That's been working great.
Each input has an attribute called "saveable" which drives another directive which is shared by all these input types. the Saveable directive uses a $resource to post data back to the API.
My question is, should this logic be in a directive at all? I initially put it there because I thought I would need the saving logic in multiple controllers, but it turns out they're really happening in the same one. Also, I read somewhere (lost the reference) that the directive is a bad place to put API logic.
Additionally, I need to introduce unit testing for this saving logic soon, and testing controllers seems much more straightforward than testing directives.
Thanks in advance; Angular's documentation may be… iffy… but the folks in the community are mega-rad.
[edit] a non-functional, simplified look at what I'm doing:
<input ng-model="question.value" some-input-type-directive saveable ng-blur="saveModel(question)">
.directive('saveable', ['savingService', function(savingService) {
return {
restrict: 'A',
link: function(scope) {
scope.saveModel = function(question) {
savingService.somethingOrOther.save(
{id: question.id, answer: question.value},
function(response, getResponseHeaders) {
// a bunch of post-processing
}
);
}
}
}
}])
No, I don't think the directive should be calling $http. I would create a service (using the factory in Angular) OR (preferably) a model. When it is in a model, I prefer to use the $resource service to define my model "classes". Then, I abstract the $http/REST code into a nice, active model.
The typical answer for this is that you should use a service for this purpose. Here's some general information about this: http://docs.angularjs.org/guide/dev_guide.services.understanding_services
Here is a plunk with code modeled after your own starting example:
Example code:
var app = angular.module('savingServiceDemo', []);
app.service('savingService', function() {
return {
somethingOrOther: {
save: function(obj, callback) {
console.log('Saved:');
console.dir(obj);
callback(obj, {});
}
}
};
});
app.directive('saveable', ['savingService', function(savingService) {
return {
restrict: 'A',
link: function(scope) {
scope.saveModel = function(question) {
savingService.somethingOrOther.save(
{
id: question.id,
answer: question.value
},
function(response, getResponseHeaders) {
// a bunch of post-processing
}
);
}
}
};
}]);
app.controller('questionController', ['$scope', function($scope) {
$scope.question = {
question: 'What kind of AngularJS object should you create to contain data access or network communication logic?',
id: 1,
value: ''
};
}]);
The relevant HTML markup:
<body ng-controller="questionController">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="saveModel(question)" />
</body>
An alternative using only factory and the existing ngResource service:
However, you could also utilize factory and ngResource in a way that would let you reuse some of the common "saving logic", while still giving you the ability to provide variation for distinct types of objects / data that you wish to save or query. And, this way still results in just a single instantiation of the saver for your specific object type.
Example using MongoLab collections
I've done something like this to make it easier to use MongoLab collections.
Here's a plunk.
The gist of the idea is this snippet:
var dbUrl = "https://api.mongolab.com/api/1/databases/YOURDB/collections";
var apiKey = "YOUR API KEY";
var collections = [
"user",
"question",
"like"
];
for(var i = 0; i < collections.length; i++) {
var collectionName = collections[i];
app.factory(collectionName, ['$resource', function($resource) {
var resourceConstructor = createResource($resource, dbUrl, collectionName, apiKey);
var svc = new resourceConstructor();
// modify behavior if you want to override defaults
return svc;
}]);
}
Notes:
dbUrl and apiKey would be, of course, specific to your own MongoLab info
The array in this case is a group of distinct collections that you want individual ngResource-derived instances of
There is a createResource function defined (which you can see in the plunk and in the code below) that actually handles creating a constructor with an ngResource prototype.
If you wanted, you could modify the svc instance to vary its behavior by collection type
When you blur the input field, this will invoke the dummy consoleLog function and just write some debug info to the console for illustration purposes.
This also prints the number of times the createResource function itself was called, as a way to demonstrate that, even though there are actually two controllers, questionController and questionController2 asking for the same injections, the factories get called only 3 times in total.
Note: updateSafe is a function I like to use with MongoLab that allows you to apply a partial update, basically a PATCH. Otherwise, if you only send a few properties, the entire document will get overwritten with ONLY those properties! No good!
Full code:
HTML:
<body>
<div ng-controller="questionController">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="save(question)" />
</div>
<div ng-controller="questionController2">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="save(question)" />
</div>
</body>
JavaScript:
(function() {
var app = angular.module('savingServiceDemo', ['ngResource']);
var numberOfTimesCreateResourceGetsInvokedShouldStopAt3 = 0;
function createResource(resourceService, resourcePath, resourceName, apiKey) {
numberOfTimesCreateResourceGetsInvokedShouldStopAt3++;
var resource = resourceService(resourcePath + '/' + resourceName + '/:id',
{
apiKey: apiKey
},
{
update:
{
method: 'PUT'
}
}
);
resource.prototype.consoleLog = function (val, cb) {
console.log("The numberOfTimesCreateResourceGetsInvokedShouldStopAt3 counter is at: " + numberOfTimesCreateResourceGetsInvokedShouldStopAt3);
console.log('Logging:');
console.log(val);
console.log('this =');
console.log(this);
if (cb) {
cb();
}
};
resource.prototype.update = function (cb) {
return resource.update({
id: this._id.$oid
},
angular.extend({}, this, {
_id: undefined
}), cb);
};
resource.prototype.updateSafe = function (patch, cb) {
resource.get({id:this._id.$oid}, function(obj) {
for(var prop in patch) {
obj[prop] = patch[prop];
}
obj.update(cb);
});
};
resource.prototype.destroy = function (cb) {
return resource.remove({
id: this._id.$oid
}, cb);
};
return resource;
}
var dbUrl = "https://api.mongolab.com/api/1/databases/YOURDB/collections";
var apiKey = "YOUR API KEY";
var collections = [
"user",
"question",
"like"
];
for(var i = 0; i < collections.length; i++) {
var collectionName = collections[i];
app.factory(collectionName, ['$resource', function($resource) {
var resourceConstructor = createResource($resource, dbUrl, collectionName, apiKey);
var svc = new resourceConstructor();
// modify behavior if you want to override defaults
return svc;
}]);
}
app.controller('questionController', ['$scope', 'user', 'question', 'like',
function($scope, user, question, like) {
$scope.question = {
question: 'What kind of AngularJS object should you create to contain data access or network communication logic?',
id: 1,
value: ''
};
$scope.save = function(obj) {
question.consoleLog(obj, function() {
console.log('And, I got called back');
});
};
}]);
app.controller('questionController2', ['$scope', 'user', 'question', 'like',
function($scope, user, question, like) {
$scope.question = {
question: 'What is the coolest JS framework of them all?',
id: 1,
value: ''
};
$scope.save = function(obj) {
question.consoleLog(obj, function() {
console.log('You better have said AngularJS');
});
};
}]);
})();
In general, things related to the UI belong in a directive, things related to the binding of input and output (either from the user or from the server) belong in a controller, and things related to the business/application logic belong in a service (of some variety). I've found this separation leads to very clean code for my part.