I'm working on learning Angular with Google maps and having difficulty rendering a map within a div controlled by an ng-if directive.
For my application, I would like the map render upon receiving the coordinates from the $scope.location function. I would then click on a button and invoke $scope.myRide in order to place a marker on the map. However, what is happening is that the map does not render until I click on the button.
The coordinates within $scope.map are serve as placeholders until the actual coordinates are received from $scope.location.
Any assistance will be greatly appreciated :)
angular.module('MapView',[])
.config(function($stateProvider){
$stateProvider
// the state will go on the html that you want route the user.
.state('mapView', {
url: '/mapView',
templateUrl: 'app/mapView/mapView.html',
controller: function($scope){
$scope.map = { center: { latitude: 38, longitude: -122 }, zoom: 15 };
$scope.output = document.getElementById("loc");
$scope.maker = {};
$scope.coords = {};
$scope.mockUsers = [{username: 'young', mess: 'I need a ride at 9am'},{username: 'young', mess: 'I need a ride at 9am'}, {username: 'young', mess: 'I need a ride at 9am'}]
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords.lon = true; // added this
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()
$scope.myRide = function(){
$scope.maker.latitude = $scope.map.center.latitude;
$scope.maker.longitude = $scope.map.center.longitude;
}
},
controllerAs: 'LoginCtrl'
});
})
The following is the HTML:
<div ui-sref='mapView' >
<div ng-show = "coords.lon == true">Hello</div>
<div id="loc"></div>
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' maker=>
<ui-gmap-marker coords="maker" icon="icon" idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
</div>
<div class="btn-Center">
<button class="btn btn-danger" ng-click='myRide()' >Ride</button>
</div>
<div id="mapUsers">
<div class="clear" ng-repeat='user in mockUsers'>
<div class="mapUserImg">
<img class="img-responsive" src="http://falconbus.in/images/site/user_icon.png">
</div>
<h1> {{ user.username }} </h1>
<p> {{ user.mess}} </p>
</div>
</div>
</div>
I have some recomendations,
1) for debugging you can install the chrome extension ng-inspector in there you can view what value you have in center and zoom when you are in the html side, check if the data have sense.
2) i thing you use angular-google-maps from angular-ui if is true, you have two errors,
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' **maker=**>
<ui-gmap-marker coords="maker" **icon="icon"** idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
marker empty is not necesesary and icon do are inside to options like the example in the official website.
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
<div ng-cloak>
<ul>
<li>coords update ctr: {{coordsUpdates}}</li>
<li>dynamic move ctr: {{dynamicMoveCtr}}</li>
</ul>
</div>
3) in the anglar-google-maps website you can use Edit in Plnkr for made some first test to familiarize with this directives
[<script src="~/Scripts/app/Home.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>AngularJS Examples</h1>
<div ng-app="myApp" style="width:400px;">
<div ng-controller="homeController">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Person Name:</td>
<td>
<input type="text" ng-model="Person.personName" />
</td>
</tr>
<tr>
<td>Person Age:</td>
<td>
<input type="text" ng-model="Person.personAge" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="alert alert-info" ng-if="Person.personAge < 18">
Person Age must be <strong>above 18 years.</strong>
</div>
<div class="alert alert-success" ng-if="Person.personAge >= 18 && Person.personAge <= 100">
<strong>Valid Age.</strong>
</div>
<div ng-if="Person.personAge > 100" class="alert alert-warning">
Person Age must be <strong> between 18 and 100.</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
learn from c-sharpcorner.com
I noticed that upon receiving the coordinates, If I click anywhere on the page the map will load. I thus modified the js file to simulate a click, and it works. Although this works for my application, I'm still not sure what the root issue of the problem is. Any assistance would be greatly appreciated.
This is the function I modified by adding a .click() :
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords = true; // added this
document.getElementById('loc').click();
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()
Related
Currently the code uses Vue.js to manage the inputs and post requests and is using JavaScript to handle things like Google Map functionality.
The issue is that when we wrap a div id around all the current HTML on a page so the Vue.js functionality works, it results in the Google Map code in a JavaScript file to run incorrectly and loads the page with no map. As soon as the Vue.js id (adminVenueVue) is removed the map works fine.
When trying to debug the issue it seems that the function that is responsible for updating the map doesn't run all the way through and stops when a listener function is created as no following code would run after. Below shows this function if you need more code please tell me.
function initCreateUpdateVenue() {
var mapCenter = new google.maps.LatLng({
lat: 54.445886,
lng: -3.435974
});
var marker, london = {
lat: 52.41,
lng: -1.69
};
var ZoomLevel = 5;
map = new google.maps.Map(document.getElementsByName('googleMap')[0], {
zoom: ZoomLevel,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.setZoom(5);
var input = (document.getElementsByName("autocomplete")[0]);
var options = {
componentRestrictions: {
country: "uk"
}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var element = document.getElementsByName("autocomplete")[0];
//remove any errors
element.classList.remove("is-invalid");
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
populate_hidden_fields(place);
set_venue_detail_fields(place);
populate_fields(place.address_components);
set_map_location();
});
}
Here is the HTML code (the Google Map code is at the bottom)
<div id="adminVenueVue">
<div class="row">
<div class="col-lg-12 ">
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Administrator Controls</div>
<div class="panel-body">
#include('venue.components.admin_controls', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Start by finding your address</div>
<div class="panel-body">
#include('venue.components.autocomplete-form', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Venue Details</div>
<div class="panel-body" style="padding-bottom: 16px;">
#include('venue.components.venue-details', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
<div class="col-lg-6 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable ">Address Details</div>
<div class="panel-body">
#include('venue.components.form', ['submitButtonText' => 'Submit Venue'])
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Map</div>
<div class="panel-body">
<div id="googleMap" name="googleMap" class="width-full" style="height: 500px;"></div>
</div>
</div>
</div>
</div>
</div>
I recommend using the Vue google map component (vue2-google-maps).
Follow this example code:
<body>
<div id="root">
<google-map :center="{lat: 1.38, lng: 103.8}" :zoom="12" style="width: 100%; height: 500px">
<ground-overlay source="./overlay.png" :bounds="{
north: 1.502,
south: 1.185,
east: 104.0262,
west: 103.5998,
}" :opacity="0.5">
</ground-overlay>
</google-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
v: '3.26',
},
// Demonstrating how we can customize the name of the components
installComponents: false,
});
document.addEventListener('DOMContentLoaded', function() {
Vue.component('google-map', VueGoogleMaps.Map);
Vue.component('ground-overlay', VueGoogleMaps.MapElementFactory({
mappedProps: {
'opacity': {}
},
props: {
'source': {type: String},
'bounds': {type: Object},
},
events: ['click', 'dblclick'],
name: 'groundOverlay',
ctr: () => google.maps.GroundOverlay,
ctrArgs: (options, {source, bounds}) => [source, bounds, options],
}));
new Vue({
el: '#root',
data: {
place: '',
},
});
});
</script>
</body>
Or, if you're using webpack and Vue file components, follow the instructions bellow.
First install it : npm install vue2-google-maps
Then register it in main.js file
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_TOKEN',
libraries: 'places', // This is required if you use the Autocomplete plugin
}
})
So, you can use it like a component:
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
#click="center=m.position"
/>
</GmapMap>
More at:
https://www.npmjs.com/package/vue2-google-maps
https://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html
https://alligator.io/vuejs/vue-google-maps/ (tutorial)
Html:
<body ng-app ng-controller="OrderFormController">
<!--<h1 class="errorHeader">List of Classes</h1>-->
<header>
<div class="container">
<div id="branding">
<h1>Apex <span class="highlight"> Editor </span> </h1>
</div>
</div>
</header>
<div class="col-md-12 col-lg-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Apex Editor</li>
</ul>
</div>
<div class="panel-body">
<div>
<input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
</div>
<div class="btn-group-vertical" style="padding: 1%">
<button type="button" class="btn btn-primary" id="editBtn">Edit</button>
</button>
</div>
<div class="tab-content" align="left">
<div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>
<div>{{apexClassWrapper.name}}</div>
<img src="../img/ajax-loader.gif" id="loaderImage" style='display:none'>
<form>
<textarea ng-model="apexClassWrapper.body" id="code" name="code" readonly="true" >{{apexClassWrapper.body}}</textarea>
</form>
</div>
<button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
</div>
</div>
</div>
<script src="../js/makeEditable.js"></script>
<script>
$(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("code"),{
linenumber : true,
matchBrackes: true,
mode: "text/x-apex"
})
});
</script>
<footer>
<p>Web based Apex Editor</p>
<p>Developed By - Nagendra Kumar Singh</p>
</footer>
</body>
CSS and JS files included at top:
<script src="../js/codemirror.js"></script>
<script src="../js/apex.js"></script>
<script src="../js/matchbrackets.js"></script>
<link href="../css/codemirror.css" rel="stylesheet"/>
The controller is a simple one fetching the class through a RESTApi.
function OrderFormController($scope, $http) {
$('#autocomplete').autocomplete({
type: 'POST',
serviceUrl: 'http://localhost:8989/getSuggestion',
onSelect: function (suggestion) {
console.log('suggestion.value -> '+suggestion.value);
var data = {
apexClassName:suggestion.value
};
var config = {
params: data
};
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody",config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
});
}
});
};
But I can only see {{apexClassWrapper.body}} in my text area, I dont see the real code when using CodeMirror, If I remove code mirror , I can see the class, but I cannot figure out a way to show the body with CodeMirror included.
There are no errors in console log and all the JS and CSS files are loaded perfectly. Please help.
Ok, So I think I may have figured it out. What I did is I set a timeout for the codemirror code to run as follows in the js file and removed it from the index.html.
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody", config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if(globalEditor) {
globalEditor.toTextArea();
}
setTimeout(function (test) {
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-apex"
});
globalEditor = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
The only issue in this answer is that, it creates multiple code editor window when I try to load different classes. How can I resolve that?
So finally got it working, defined a global variable and using the method toTextArea
Am loading data from database to a table in html with angualar js. am also using interval so as to make the table reload every 10 seconds to get new data that has just been inputed by other users.
Problem:
The table blinks every time it reloads. making the page look funny like it has a glitch.
What am looking for:
Is there a way i can make the new data just slide in from the top of the table and become number one while the rest re adjust underneath it And become number two, three and so on. i was made to believe Angular Js is magical reason why i opted for it instead of using my usual AJAX
Angular Code
var supDetails = angular.module("supDetails", ['datatables']);
supDetails.controller('supportController', function($scope, $http, $interval) {
$scope.names = [];
$scope.isFirst = true;
$scope.loadData = function() {
var httpRequest = $http({
method: 'GET',
url: 'anfil.php?ins=sup'
}).success(function(data, status) {
console.log('loading..');
$scope.names = data;
if(!$scope.isFirst){
angular.forEach(data,function(key,val){
$scope.names[key] = data[key];
});
}
$scope.isFirst = false;
});
};
$scope.loadData();
// Function to replicate setInterval using $timeout service.
$interval(function () {
$scope.loadData();
}, 10000);
});
My HTML
<!-- /.col -->
<div class="col-md-9" ng-app = "supDetails" ng-controller="supportController">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Messages</h3>
<!-- /.box-tools -->
<div class="box-tools pull-right">
<div class="has-feedback">
<button type="button" ng-click="loadData()" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
</div>
</div>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<div class="mailbox-messages">
<table datatable="ng" class="table table-hover table-striped">
<thead>
<tr>
<th>Stat</th>
<th>Name</th>
<th>Problem</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td class="mailbox-star"><i class="fa fa-circle text-blue"></i></td>
<td class="mailbox-name">{{x.user_id}}</td>
<td class="mailbox-subject"><b>{{x.ticket_title}}</b> - {{x.subject}}
</td>
<td class="mailbox-date">{{x.ticket_open_date}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Stat</th>
<th>Name</th>
<th>Problem</th>
<th>Time</th>
</tr>
</tfoot>
</table>
<!-- /.table -->
</div>
<!-- /.mail-box-messages -->
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
</div>
<!-- /.col -->
I think its your css problem which doesn't have a minimum height as you can see in this snippet its not blinking..
If you still want data to appear slide from up to down, You can uncomment the code in the answer, in this way it will remove row one by one from the table and replace it with the new one.
var app = angular.module('myApp', []);
function PeopleCtrl($scope, $http,$interval) {
$scope.people = [];
$scope.isFirst = true;
$scope.loadPeople = function() {
var httpRequest = $http({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/users'
}).success(function(data, status) {
console.log('loading..');
$scope.people = data;
/* if(!$scope.isFirst){
angular.forEach(data,function(val,key){
$scope.people[key] = data[key];
});
}
$scope.isFirst = false;*/
});
};
$scope.loadPeople();
$interval(function () {
$scope.loadPeople();
}, 10000);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<table class="table">
<tr>
<th>Id</th>
<th>Name</th>
<th>UserNmae</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.username}}</td>
</tr>
</table>
</div>
</div>
There are a few ways to solve your problems:
1) Write algorithm, that load your data then compare it with existing data. If there any diffs you, should add just new records to your table.
2) Use WebSockets, they will give you ability to get from server only new records in real-time.
I'm working on a blog like structured web app In AngularJS. Im trying to retrieve the user which is an other of a post and retrieve their display name dynamically as it loops through all the posts but I cant seem to retrieve data correctly.. This is what I have done so far.
Blog Controller:
uno.controller('newsCtrl', function($scope, $http, adbFactory){
$scope.derp = 'derp!!!!!';
adbFactory.get($http, 'get users 1', false).success(function(data){
$scope.user = data;
}).error(function(){
console.log('Errorrr');
});
$scope.init = function(){
adbFactory.get($http, 'get all blog_posts', true).success(function(data){
$scope.posts = data;
console.log($scope.posts);
});
};
$scope.getAuthor = function(_id) {
adbFactory.get($http, 'get users id ' +_id+ ' spec', false).success(function(data){
//$scope.author = data;
//console.log($scope.author);
return data;
});
};
});
If I console.log the data it shows the users perfectly given the author id which is in the database, but when i attempt to call the getAuthor function using the '{{ }}' scope i get a collage of errors... heres my blog template below.
Blog Template:
<div class="large-12 small-12 columns" ng-init="init()">
<div class="row">
<div class="large-12 small-12 columns" ng-repeat="topic in posts" style="margin-bottom:20px;">
<div id="news-post" class="panel animated fadeInUp">
<div class="row" ng-init="getAuthor(topic.author_id)">
<div class="large-2 small-2 columns">
<img src="{{ topic['thumb'] }}" alt="" style="border-radius:50%; height:100px; width: 150px;" />
</div>
<div class="left large-10 small-10 columns">
<div class="row">
<h2 class="post-title">{{topic['title']}} <p>Posted By, {{ getAuthor(topic.author_id).email }}</p></h2>
<p>{{ topic['body'] }}</p>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
not quite sure what the problem can be.. Any thing I'm missing?
UPDATE::
I recently updated my controller and factories to get a better scope of handling my data flow, my Controller now looks like this:
uno.controller('newsCtrl', function($scope, $http, adbFactory, $cacheFactory, unoFunctions){
$scope.init = function(){
adbFactory.get($http, 'get all blog_posts', true).success(function(data){
$scope.posts = data;
$scope.getUser = function(_id) {
$scope.userData = unoFunctions.getUser(_id);
//console.log($scope.userData);
return $scope.userData;
};
});
$scope.getTags = function(_id) {
var post = unoFunctions.getPost(_id);
var _tags = post.tags.split(',');
for(var i = 0; i < _tags.length; i++)
{
_tags[i] = _tags[i].trim();
}
return _tags;
};
$scope.getUserName = function(_id) {
$scope.userData = unoFunctions.getUser(_id);
return $scope.userData.display_name;
};
$scope.getUser = function(_id) {
$scope.userData = unoFunctions.getUser(_id);
//console.log($scope.userData);
return $scope.userData;
};
$scope.getUserName = function(_id) {
$scope.userData = unoFunctions.getUser(_id);
return $scope.userData.display_name;
};
};
});
the unoFunctions factory is wht I use now to handle certain requests from my database, and that is shown below.
uno.factory('unoFunctions', function(adbFactory, $http, $cacheFactory){
var fact = {};
var user = $cacheFactory('user');
var post = $cacheFactory('post');
fact.getUser = function(_id) {
if(!user.get(_id)){
adbFactory.get($http, 'get users id '+_id+' spec', false).success(function(data){
user.put(_id, data);
});
}
return user.get(_id);
};
fact.getPost = function(_id) {
if(!post.get(_id))
{
adbFactory.get($http, 'get blog_posts id '+_id+' spec', false).success(function(data){
post.put(_id, data);
});
}
return post.get(_id);
};
fact.loggedIn = function()
{
console.log('gfdg');
};
/*------------------------------*/
return fact;
});
And my template to output the result is this:
<div class="large-12 small-12 columns" ng-init="init()">
<div class="row">
<div class="large-12 small-12 columns" ng-repeat="topic in posts | filter:postTitle | orderBy:'-time' " style="margin-bottom:20px;">
<div id="news-post" class="panel animated fadeInUp" ng-init="getTags(topic.id)">
<div class="row" style="padding-bottom:0px;">
<div class="large-2 small-2 columns">
<img src="{{ topic['thumb'] }}" alt="" style="border-radius:50%; height:120px; width: 200px;" />
</div>
<div class="left large-10 small-10 columns">
<div class="row" style="padding-bottom:0px;">
<h2 class="post-title">
<a href="#/news/post/{{ topic['id'] }}">
{{topic['title']}}
</a>
<p style="font-size:13px; font-style:italic; color:#a5a5a5" class="right">{{ topic.time | timeago }} {{ }}</p>
<p style="font-weight:bold; font-style:italic; color:#aaa">Posted By, {{ getUser(topic.author_id).display_name }}</p></h2>
<p>{{ topic['body'] }}</p>
<div ng-repeat="tag in getTags(topic.id)"><span style="background:#ccc; margin:7px; padding:4px; border-radius:5px; font-size:12px" class="left">{{ tag }}</span></div>
<p class="right" style="background:#dedede; font-size:13px; padding:7px; border-radius:6px; color:#1985A1;">{{ topic.category }}</p
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This works fine and returns the required results I'm looking for but I wish to get rid of the countless Error: [$rootScope:infdig] errors and keep my console clean.. I researched the error and it seems to be because when I call functions from the unoFunctions factory like, getUser, or getPost. it returns a new array each time or something like that which I guess throws things out of scope. I'm not entirely sure, and reason for this?
This binding
<p>Posted By, {{ getAuthor(topic.author_id).email }}</p>
assumes that getAuthor returns an object, but it doesn't, even with proper return statement - because asynchronous request takes place, and adbFactory chain will apparently return a promise, not an object. And doing adbFactory.get every time getAuthor bindings are being watched would be bad performance-wise - json result has to be parsed constantly, even with $http cache.
A suitable solution for caching and binding service results to the scope (and a precursor to full-blown model) is
var authors = $cacheFactory('authors');
$scope.getAuthor = function(_id) {
if (!authors.get(_id)) {
authors.put(_id, {});
adbFactory.get($http, 'get users id ' +_id+ ' spec', false).success(function(data){
authors.put(_id, data);
});
}
return authors.get(_id);
};
Hi I am trying to retrieve data from the server using $http, and correct data is being retrieved from the service, the data is -
[{
"URL":"someimg.jpg",
"TITLE":"Test Demo",
"DATE_ADDED":"2014-02-08 00:46:00",
"SUMMARY":"this is summary"
}]
the template that I wrote is as follows -
<article class="span8" ng-controller="allBlogs">
<div ng-show="success">
<div ng-repeat="blog in blogs.data">
<div class="row">
<div class="span3">
<img ng-src="{{blog['URL']}}" alt="" />
</div>
<div class="span5" ng-repeat-end>
<h4>{{blog.TITLE}}</h4>
<p>{{blog.DATE_ADDED}}</p>
<p>{{blog.SUMMARY}}</p>
</div>
</div>
</div >
</div>
</article>
the controller for the above template is as follows -
pk.controller("allBlogs", function($scope, $http, BlogsHandler){
$scope.success = false;
(function(){
BlogsHandler.getAllBlogs().success(function(data){
console.log(data);
$scope.success = true;
$scope.blogs = data.data;
});
})();
});
I am trying to set the success as true when the service returns data and thus the remaining part of the template should run. But this is not happening. Is it not that any change to $scope variable is being watched by the framework itself?
Help needed. I even tried with ng-switch with no effect.
Thanks
You assign data.data to $scope.blogs, so you don't need to add .data before blogs again.
$scope.blogs = data.data;
So, try this:
<div ng-repeat="blog in blogs track by $index">
<div class="row">
<div class="span3">
<img ng-src="{{blog.URL}}" alt="" />
</div>
<div class="span5">
<h4>{{blog.TITLE}}</h4>
<p>{{blog.DATE_ADDED}}</p>
<p>{{blog.SUMMARY}}</p>
</div>
</div>
</div >