I have a cordova app in which I want to show the details of a location. For some reason when I try to display a variable in HTMl which is being successfully assigned in JS, nothing appears.
JS controller:
app.controller('placeCtrl', function($scope, LocDat){
LocDat.async().then(function(d){
$scope.item= places.selectedItem;
$scope.locs = [];
for(var i=0; i<d.length; i++){
if(d[i].attributes.Joint.id === places.selectedItem.id){
getDistance(d[i]);
$scope.locs.push(d[i]);
}
}
$scope.showSite = function(){
//var ref = navigator.app.loadUrl($scope.item.attributes.Website, '_blank');
var ref = window.open($scope.item.attributes.Website,'_blank','location=yes');
}
$scope.showDetail = function(index){
var selectedItem = d[index];
d.selectedItem = selectedItem
$scope.l = selectedItem;
console.log($scope.l.attributes.City);
$scope.ons.navigator.pushPage('location_detail.html', { title : d.selectedItem.attributes.Address });
}
});
HTML:
<!DOCTYPE html>
<html>
<body>
<div ng-controller="placeCtrl">
<ons-page class="center" ng-device-backbutton="myNavigator.popPage()">
<ons-toolbar>
<div class="left"><ons-back-button ons-if-platform="ios">Back</ons-back-button></div>
<div id="title" class="center">{{l.attributes.City}}, {{l.attributes.State}}</div>
<!--<div class="left" onclick=".myNavigator.popPage()"><ons-back-button>Back</ons-back-button></div>-->
<!--<div class="center">Page 2</div>-->
</ons-toolbar>
<h2 align="center">Location Details Go Here</h2>
<!--enter more content here-->
</ons-page>
</div>
</body>
</html>
Image of the Console output:
Apparently my reputation is too low to post images... Seriously? Anyway, it displays the City name in the console successfully, but the html only shows the comma
Services that make async calls, such as your LocDat, do not automagically trigger a digest event when they return. If you're writing a service it should call a $scope.$apply() chained to the end of the promise. Alternatively you can wrap any changes to $scope variables in an apply and that should get you where you need.
$scope.$apply( function() { $scope.l = selectedItem; } );
In angularjs data binding, if the data type is list or object, it will pass by reference value in view.
When you do like $scope.l = selectedItem, the reference is changed, but the watched reference is previous one. So it will be always better to bind by an attribute on an object, but not the object itself. like:
<div id="title" class="center">{{obj.l.attributes.City}}, {{obj.l.attributes.State}}</div>
And update in controller with:
$scope.obj.l = selectedItem;
The issue was that the scope changed when I loaded the new page. I'm now passing the data through the parameters of onsenui's pushpage function and assigning them to the scope variables in a separate controller.
Related
I must confess that it's not easy to find some basic and easy to understand guide about compiling templates in AngularJS.
Here is the deal:
In my main html-page I have this:
<div>
<div data-ng-include="'./views/testTemplate.html'"></div>
</div>
<div>
<input type=button ng-click="func()" />
</div>
testTemplate.html contains this:
hello {{myname}}
Im my javascript-controller I have this:
$scope.myname = 'max';
Now, when I view the page I see the text "hello max".
Im my javascript-controller I also have this:
$scope.func = function(){
var newScope = $scope.$new();
var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>';
$compile(newElem)(newScope);
console.log('newElem');
console.log(newElem);
});
In the console I can see this:
newElem
<ng-src><div ng-include="'./views/testTemplate.html'" ></div></ng-src>
So, the template is not getting compiled? What am I missing?
***************EDIT***************
The thing is that Im trying to print to console the content of the new element because it needs to be mailed. So I need to send a mail with the compiled content from the template.
Having looked at the answers below, I now have this:
var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>';
var compiledElem = $compile(newElem)(newScope);
console.log('compiledElem[0]');
console.log(compiledElem[0]);
If I use this:
$window.location.href = 'mailto:mailmail.com?subject=sub&body=' + compiledElem[0].innerHTML;
then the body of the mail contains this (uncompiled template):
<!-- ngInclude: './views/matching/testTemplate.html' -->
If I use this:
$window.location.href = 'mailto:mailmail.com?subject=sub&body=' + compiledElem[0];
then the body of the mail contains this:
[object HTMLElement]
So none of them is showing the html-content in the mail I want to send. I know its not exactly the original question, but it was a part of the issue.
I think the variable 'newElem' is not modified by the $compile command. It has a return value which you should use.
var compiledElement = $compile(newElem)(newScope);
console.log('compiledElement');
console.log(compiledElement);
You are missing adding your HTML to the DOM.
$scope.func = function(){
var newScope = $scope.$new();
var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>';
//Append to DOM
document.querySelector('#some-id').append($compile(newElem)(newScope));
console.log('newElem');
console.log(newElem);
});
In my example I'm using document.querySelector that is raw js. But we can use the $element service, or if we are in a directive's link function, it receives a param representing the current element where the directive is being applied.
EDIT:
If you want to send your compiled HTML in an email, then, you will need to wait until all the $digest finish to compile your template.
$scope.func = function(){
var newScope = $scope.$new();
var newElem = angular.element('<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>');
$compile(newElem)(newScope);
$timeout(function(){
$window.location.href = 'mailto:mailmail.com?subject=sub&body=' + newElem.html();
//console.log('newElem');
//console.log(newElem.html());
});
});
Create your template using angular.element, use $timeout to wait until the end and then use newElem.html();.
UPDATE 8:
CODE:
<% include ../partials/header %>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.4/angularfire.min.js"></script>
<script>
var config = {
info
};
firebase.initializeApp(config);
var fb = firebase.database().ref("posts/fun");
var app = angular.module('app', ['firebase']);
app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {
$scope.data = [];
var _start = 0;
var _end = 4;
var _n = 5;
$scope.getDataset = function() {
fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {
$scope.data.push(dataSnapshot.val());
console.log("THE VALUE:"+$scope.data);
});
_start = _start + _n;
_end = _end + _n;
};
$scope.getDataset()
});
// Compile the whole <body> with the angular module named "app"
angular.bootstrap(document.body, ['app']);
</script>
<div class ="containerMarginsIndex">
<div ng-controller="ctrl">
<div class="fun" ng-repeat="d in data">
<h3 class="text-left">{{d.title}}</h3>
<div class = "postImgIndex">
<a href="details/{{d.id}}" target="_blank">
<img class= "imgIndex" ng-src="/images/uploads/{{d.image}}" >
</a>
</div>
<div class="postScore">{{d.upvotes - d.downvotes}} HP</div>
</div>
</div>
</div>
<% include ../partials/footer %>
SITUATION:
Ok, I have reworked my Firebase database architecture and changed the Firebase rules.
I am now certain the Firebase function returns a value (it is logged in the console).
But I still get the following error:
This HTML:
<div class="fun" ng-repeat="d in data">
<h3 class="text-left">{{d.title}}</h3>
<div class = "postImgIndex">
<a href="details/{{d.id}}" target="_blank">
<img class= "imgIndex" ng-src="/images/uploads/{{d.image}}" >
</a>
</div>
<div class="postScore">{{d.upvotes - d.downvotes}} HP</div>
</div>
gets REPLACED by this once RENDERED:
<!-- ngRepeat: d in data --> == $0
What have I done wrong ?
It's not displaying in your view because you have nothing on the $scope and you're not using {{}} to interpolate your data. See the following changes:
Assign data to a $scope variable to be used in the view:
$scope.data = [];
var _start = 0;
var _end = 4;
var _n = 5;
var getDataset = function() {
fb.orderByChild('time').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {
$scope.data.push(dataSnapshot.val());
});
_start = _start + _n;
_end = _end + _n;
And your view, use ngRepeat and {{}} to interpolate:
<div class ="containerMarginsIndex">
<div class="fun" ng-repeat="d in data">
<h3 class="text-left">{{d.title}}</h3>
<div class = "postImgIndex">
<a href="details/{{post.id}}" target="_blank">
<img class= "imgIndex" src="/images/uploads/{{post.image}}" >
</a>
</div>
<div class="postScore">({{d.upvotes - d.downvotes}}) HP</div>
</div>
</div>
Add your scroll listener within your controller. The function more does not exist indeed, however you do have a $scope.more method.
app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {
// ORDERED BY TIME:
var ref = firebase.database().ref("posts/fun");
var scrollRef = new Firebase.util.Scroll(ref, "time");
$scope.posts = $firebaseArray(scrollRef);
scrollRef.scroll.next(5);
// AS DATA APPEARS IN DATABASE ORDERED BY TIME:
ref.once('value', function(snap) {
$scope.rawdata = snap.val();
$scope.$apply();
});
$scope.more = function() {
scrollRef.scroll.next(5);
};
// Add scroll listener
window.addEventListener('scroll', function() {
if (window.scrollY === document.body.scrollHeight - window.innerHeight) {
$scope.$apply($scope.more);
}
});
});
Note that I am calling $scope.more within $scope.$apply so that the scope is digested at the end of the call. Indeed a JS listener on a window scroll event is out of the Angular lifecycle so we need to manually $digest the scope for Angular to update all its watchers and update the HTML. Search online about $scope.$apply if you want to learn more about it.
About your first problem
Your angular application is not started because angular is never initialized. For that you need either to load it synchronously and use the ng-app directive, or if you don't want to change anything with your code you can simply add these lines after your module and controller definition:
// Compile the whole <body> with the angular module named "app"
angular.bootstrap(document.body, ['app']);
You need to include $scope.$apply() because the the scroll event executes outside Angular's context.
Also the event listener should be inside your controller so that the scoped more function is accessible.
Here's an updated fiddle:
https://jsfiddle.net/xue8odfc/2/
I'd say the problem with Angular not resolving the {{post.image}} etc. is due to incompatibilities among the libraries you are referencing. I suggest testing using the versions from the working jsfiddle:
<script src="https://cdn.firebase.com/js/client/2.0.3/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.4/angularfire.min.js"></script>
I have a list of messages. When a particular message is clicked it loads the details. This part works fine.
I want to load some other related data asynchronously when the clicked message is loaded. For that I'm nesting a view inside my messageView. However I am unable to load and access the data.
Here is my template
<script type="text/x-handlebars" id="message">
{{#view "messageThread" contentBinding="this"}}
{{#each message in view.getConversation}}
<div>Message body</div>
{{message.body}}
{{/each}}
</div>
{{/view}}
</script>
Here is the messageThreadView used in the template above
App.MessageThreadView = Ember.View.extend({
getConversation: function(){
var msg = this.get('context').model;
var sender_id = msg.sender.id;
var recipient_id = msg.recipient.id;
downloadConversation(recipient_id, sender_id);
return this.get('current_conversation');
}.property('current_conversation'),
});
Here is the asynchronous data load function called in the view above
function downloadConversation(recipient_id, sender_id){
$.getJSON(<a url>)
.then(function(data){
App.set('current_conversation', data['objects']);
});
}
How do I get view.getConversation to work as expected i.e load the data when it becomes available?
Here's the simplest pattern for asynchronous properties, especially when they are a collection. You essentially return a collection reference (in this case convo), then you asynchronously populate that collection from the reference.
App.MessageThreadView = Ember.View.extend({
getConversation: function(){
var msg = this.get('context').model,
sender_id = msg.sender.id,
recipient_id = msg.recipient.id,
convo = [];
$.getJSON(<a url>).then(function(data){
data.forEach(function(item){
convo.pushObject(item);
});
});
return convo;
}.property(), // this should be watching sender and receipient
});
I'm just getting started with Knockout.js and i have a view(html) which is supposed to be populated by data from a rest api via jquery's $.getJSON method.
When i run the app, nothing shows but using firebug i can see that the 'GET' query returns a status code of 200 and the right data.
I'm at a fix as to why nothing shows in the view since the bindings in Knockout.js are supposed to be automatic.
Below is my code.
Thanks
<div id ='main'>
<!-- ko foreach: posts -->
<p>Hello</p><span data-bind="text: title"></span></p><p data-bind="text: content"></p>
<p data-bind="text: author"></p><p data-bind="text: date"></p>
<!-- /ko -->
</div>
</body>
<script type="text/javascript">
function Post(data){
this.title = ko.observable(data.title);
this.content = ko.observable(data.content);
this.author = ko.observable(data.author);
this.date = ko.observable(data.date)
}
function PostListViewModel(){
var self = this;
self.posts = ko.observableArray([]);
$.getJSON("/posts", function(getPost){
var mappedPost = $.map(getPost, function(item){
return new Post(item)
});
self.posts(mappedPost);
});
}
var postlistviewmodel = new PostListViewModel();
ko.applyBindings(postlistviewmodel);
</script>
This should be:
$.getJSON("/posts", function(getPost){
var mappedPosts = $.map(getPost, function(item){
return new Post(item)
});
self.posts(mappedPosts);
});
wouldn't do self.posts.push(mappedPosts[i]) at all. You should just pass mappedPosts through the ko binding in order to update the listeners.
If your just getting the latest posts and want to update your current list simply do:
var allPosts = self.posts().concat(mappedPosts);
self.posts(allPosts);
You don't need the model to have ko.observable if you're just displaying them. If you want to edit model as well, then leave as.
Also, I tend to do this for single or multiple view models:
ko.applyBindings({viewModel : new viewModel() };
This allows for having multiple named view models. Access scope using: $root.viewModel
This is what I did earlier: http://jsfiddle.net/jFb3X/
Check your code against this fiddle then.
Script tags also need to be above the closing body tags
<html>
<head>
</head>
<body>
<!-- all your html content -->
<script type="text/javascript">
var viewModel = function () {
}
ko.applyBindings({viewModel : new viewModel()});
</script>
</body>
</html>
Is it something as simple as waiting for the DOM to be ready?
Are you able to try the following:
$(function () {
ko.applyBindings(postlistviewmodel);
});
Source: I've done this a few times and been stumped for a bit trying to see what I did wrong. :-)
(As a style thing, I'd also move the /body to after the /script - probably not related to your issue though).
I suspect you get multiple posts from /posts. You only push a single item (array).
...
$.getJSON("/posts", function(getPost){
var mappedPosts = $.map(getPost, function(item){
return new Post(item)
});
for(var i = 0; i < mappedPosts.length; i++) {
self.posts.push(mappedPosts[i]);
}
});
...
I have the below HTML on a page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myCart">
<head>
<title>AngularJS Shopping Cart</title>
<link href="css/jsonstore.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="header">
<h1>The JSON Store</h1>
<div class="cart-info">
My Cart (<span class="cart-items">{{item.basketCount}}</span> items)
</div>
</div>
<div id="main" ng-view>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<script src="js/routing.js"></script>
<script src="js/dataresource.js"></script>
<script src="js/basketinfo.js"></script>
<script src="js/index.js"></script>
<script src="js/detail.js"></script>
</body>
</html>
The div "main" gets replaced by HTML templates by my routes however I would like to update the header section with a shopping basket count.
I have tried model binding it as shown in the HTML and below:
function DetailController($scope, item, basketDetail) {
$scope.item = item;
$scope.item.basketCount = basketDetail.getCount();
//more code
}
I've also tried just injecting the service and calling it from the HTML. Both ways do not do anything.
Can someone help please?
Thanks
Your header div is really a view, just like the other views you've defined for use with ng-view. Someday, you might want to show more than just a basketCount model in that header view. But the fact that you are projecting even one piece of model data into that header section makes that section a view. So, I would recommend that be given its own $scope to project that model, hence its own controller.
What remains then is where to put the basketCount model? And we must consider that multiple views may allow the user to do something that need to affect that model. Angular's normal answer for "many need access" is dependency injection. So, I would put the basketCount model into a service. Views/controllers that need access to it can inject it. Someday your app may have additional views that don't need access to these models, so those views would not inject the service.
Potentially, the entire basket could be modeled in this service:
app.factory('basketService', function() {
return {
items: [],
itemCount: 0,
...
}
});
function HeaderCtrl($scope, basketService) {
$scope.basket = basketService;
...
}
function DetailCtrl($scope, basketService) {
$scope.basket = basketService;
...
}
<div id="header" ng-controller="HeaderCtrl">
<h1>The JSON Store</h1>
<div class="cart-info">
My Cart (<span class="cart-items">{{basket.itemCount}}</span> items)
</div>
You'll need to inject $rootScope, then update it:
function DetailController($scope, $rootScope, basketDetail) {
$rootScope.item = $rootScope.item || {};
$rootScope.item.basketCount = basketDetail.getCount();
//more code
}
There are a lot more ways to do this, but this is my first suggestion, because it's probably the easiest.
EDIT: per your request, other ways to do this...
You could use $parent to push to your parent scope. The upside is it's pretty quick and clean... the downside is it's a little sloppy in that one of your controllers makes assumptions about what it's parent is to some degree (but that's still not terrible, really):
{{item.basketCount}}
<div ng-controller="InnerCtrl">
</div>
function InnerCtrl($scope, basketDetail) {
$scope.$parent.item = $scope.$parent.item || {};
$scope.$parent.item.basketCount = basketDetail.getCount();
}
Then there's the method #asgoth mentioned above where you use nested controller and a method on the parent scope to update the parent scope. Valid, but like my other solution in this "other ways to do it" section, it relies on assumptions made about the controller's container, and it also relies on you creating an additional controller.
Finally, you could create a service. Now services aren't generally used this way, but you could use one this way.. Where you could take your basketDetail service, and use it to pass the value back and forth. Like so:
app.factory('basketDetail', function() {
return {
items: { basketCount: 0 },
getCount: function() {
//return something here
return 123;
}
}
});
function FooCtrl($scope, basketDetail) {
$scope.items = basketDetail.items;
$scope.items.basketCount = basketDetail.getCount();
}
function BarCtrl($scope, basketDetail) {
$scope.items = basketDetail.items;
}
<div ng-controller="FooCtrl">
{{items.basketCount}}
</div>
<div ng-controller="BarCtrl">
{{items.basketCount}}
</div>
This works because the $scope in both controllers is keeping a reference to the same object, which is maintained by your basketDetail service. But again, this isn't really the recommended way.
All of that said: $rootScope, IMO is most likely what you're looking for.
It doesn't require the creation of an additional controller.
It doesn't require the creation of any additional function references.
Will not cause the creation of any additional parent/child Scope nesting and subsequent watches.
No real need for $rootScope. Create a parent controller (e.g. RootController) with a function on its scope. The child scopes will automatically inherit it:
<div id="container" ng-controller="RootController">
...
function RootController($scope) {
$scope.item = {};
$scope.setBasketCount = function (detail) {
$scope.item.basketCount = detail.getCount();
}
}
In your detail controller you just use the setBasketCount() function:
function DetailController($scope, item, basketDetail) {
$scope.item = item;
$scope.setBasketCount(basketDetail);
//more code
}