I am currently trying ionic. I am not really used to this kind of web dev so I might be totally off-track. Anyway, I want to access an SQLite DB and add the results to a ion-slide-box.
I was trying something like that :
function selectResultSuccess(tx, results)
{
var div = "";
div += "<ion-slide-box >";
for (var i = 0 ; i < len ; i++)
{
div+="<ion-slide>"
div+= results.rows.item(i).Result ;
div+="</ion-slide>"
}
div += "</ion-slide-box >";
$(".result-list").html(div);
}
HTML :
<ion-content ng-controller="ExampleController" class="result-list">
</ion-content>
app.js :
angModule.controller("ExampleController", function($scope, $ionicSlideBoxDelegate) {
$scope.navSlide = function(index) {
$ionicSlideBoxDelegate.slide(index, 500);
}
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next(500);
}
$scope.update = function() {
$ionicSlideBoxDelegate.update();
}
});
So this does not work, the slidebox does not get updated and I got all my results on the same page (instead of having them on different slides), I have tried multiple things and I believe this is not the best way to handle that but I can't find anything that matches my needs.
I am also trying to avoid working with SQLite plugins.
So, you're going at it completely wrong, but that's ok. You're making the beginner mistake of still being in the JQuery mindset instead of the Angular mindset. Everyone goes through it.
So, Angular is based on templates, not DOM manipulation (with the exception of directives). What you want to do is build a template that does an ng-repeat on a set of slides, stored in some kind of scope variable.
Let's start with this:
<ion-content ng-controller="ExampleController" class="result-list">
<ion-slide-box></ion-slide-box>
</ion-content>
In our controller, lets take those results and put them in a scope variable. I'm going to do some "theoretical" code here as I don't have a context as to what you are doing above.
angModule.controller("ExampleController", function($scope, $ionicSlideBoxDelegate) {
$scope.results = results;
});
Once we have the results in the scope, let's do an ng-repeat on the results.
<ion-content ng-controller="ExampleController" class="result-list">
<ion-slide-box>
<ion-slide ng-repeat="result in results">{{result}}</ion-slide>
</ion-slide-box>
</ion-content>
Again, this isn't complete code, more pointing you in the right direction.
I would suggest starting with some basics and fundamentals.
Suggest starting with these articles:
http://mcgivery.com/structure-of-an-ionic-app/
http://mcgivery.com/creating-views-with-ionic/
http://mcgivery.com/controllers-ionicangular/
And if you want even more learning resources:
http://mcgivery.com/100-ionic-framework-resources/
Related
I stumbled upon an issue with AngularJS and creation of elements.
In short: I need to create an element with html contents, but I do want to have the reference to that element at hand, so that I can perform some actions on it without actually rendering it in the browser.
I tried doing the following:
var template = angular.element('<div>' + templateString + '</div>');
$compile(template)($scope);
which kinda does the trick, but...
Some of these templates have logical expression in them. in example:
<div ng-if="a && b">something</div>
Unfortunately it seems that when I try to create such an element, regardless if I use $sce.trustAsHtml() with ng-bind-html or not the & characters within these conditions get escaped as &.
The html I get in the template looks like this:
<div ng-if="a && b">something</div>
Please take a look at the fiddle: https://jsfiddle.net/3uxdrp7b/1/
if this is a known issue - I'd be thankful for pointing me in the right direction, cause I've been banging my head against this for quite some time and I can't get it to work. Every example I looked at had a simple html inside the binding - it all works ok unless I use the cursed &.
The main issue is that the element is not updated right after compiling. It will contain the correct value after the current digest cycle is finished.
<!-- HTML -->
<div class="container" ng-app="app" ng-controller="DemoController">
<h3>Result:</h3> <span ng-bind-html="el"></span>
</div>
// js
var app = angular.module("app", ["ngSanitize"]);
app.controller("DemoController", ["$scope", "$compile", "$timeout",
function($scope, $compile, $timeout) {
$scope.a = true;
$scope.b = true;
let contents = "<div ng-if='a && b'>something</div>";
let compiled = $compile("<div>" + contents + "</div>")($scope);
$timeout(function(){
console.log(compiled.html());
$scope.el = compiled.html();
},0,true);
}]);
The fiddle: https://jsfiddle.net/vy9svmop/
It might be that in your case it is simpler to use the $interpolate service to recive the immediate result.
I am trying to learn the popular method of using controllerAs as opposed to binding everything to the $scope. Briefly documented here : http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/
I am going to provide a much simplified example of my code in order to understand how to properly code in this manner.
angular
.module('gc',['gc.login']);
angular
.module('gc.login',[]);
(function () {
'use strict';
angular
.module('gc.login')
.controller('gcLoginController', gcLoginController);
gcLoginController.$inject = [];
/* #ngInject */
function gcLoginController() {
var vm = this;
vm.blah = "blah";
activate();
////////////////
function activate() {
console.log("Hello World!");
}
}
})();
The code above was created using snippits from the author of the article, but when I try to bind to the variable "blah" in the html, it does not work. It doesn't output anything at all.
<body id="ng-app" ng-app="gc">
<div class="wrapper" ng-controller="gcLoginController as vm">
"{{vm.blah}}"
</div>
</body>
This simply outputs ""
Can anyone see what error was made in using this method?
Ah shoot it was a stupid mistake. Thank you to those who double checked my work in plunker. I was using a node.js server for this project along with the template engine "Swig". Apparently that was a mistake to combine Angular and Swig, because they both use {{ }} to bind variables, which is why my code (which as charlietfl pointed out is actually working) didn't seem to work. I will update the title of this post to help others who may have a similarly difficult to trace issue with Angular / Swig.
Update - can get around this problem : https://gist.github.com/angelochen960/4188293
I'm new to the Ionic framework and was trying to follow through the Ionic ToDo app demonstration. Before starting I want to mention I manually installed the latest ionic release from its GitHub page and included the following in my index.html: ionic.bundle.js, angular.min.js, angular-animate.min.js, angular-resource.min.js, angular-sanitize.min.js, angular-ui-router.min.js. In chapter 5, the author details the controller code to create a new task. I tried adding some extra functionality to the .createTask()method defined as
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};
by changing it to
$scope.createTask = function(task) {
if (task.title == "") {
window.alert("Empty Task!");
$scope.taskModal.hide();
} else {
$scope.tasks.push({title: task.title})
$scope.taskModal.hide();
task.title = "" ;
};
};
Now, if you run this new code with the accompanying view outlined in the tutorial, you will see that the controller calls the empty task alert even if task.title == "" fails! Maybe I'm missing something really obvious, but I'm not sure. Furthermore, and the main reason I'm writing this post, if you simply comment out the line task.title = ""; in the else clause and add a task via the live view, it adds two instances of the task created! This is bizarre, or so I thought, as it seems like $scope.tasks.push({title: task.title}); is being executed twice. So just like any good programmer would do, I tried to make the compiler (in this case interpreter) spill its secrets. I declared a variable in the controller scope, $scope.i = 0, to keep track of what was happening. Leaving //task.title = "" in its place, I inserted
$scope.i += 1;
window.alert($scope.i);
right before it. When you run this code, you will notice two things:
The controller no longer calls the empty task alert on non-empty tasks.
The view is now updated with only one instance of the created task.
So, I'm not really sure what's happening. Maybe it's just some careless error I've overlooked, but any help on this will be really appreciated. Many thanks!
EDIT:
I tried experimenting further and it seems the whole thing hinges on window.alert(). Even if
$scope.i += 1;
window.alert($scope.i);
is replaced with
$window.alert("1");
the "solution" still works. Although if you use window.alert() or window.alert("") the original problem remains.
I'm new to Angular, so the documentation is a bit of a bear. When I created the following code, and it worked, I thought I was in a good place.
<div ng-controller="postListController">
{{someDataStuff}} <!-- this always works -->
<div ng-repeat="post in data">
<b>{{post.title}}</b> <!-- This sometimes works -->
</div>
</div>
...and this Javascript in Angular (a snippet, really)
var listController = app.controller('postListController', function postListController($scope) {
$scope.someDataStuff = 'hey there.';
$scope.data = new Object(null);
$.get('get.php',function(data) {
$scope.data = JSON.parse(data);
console.log($scope.data);
});
});
someDataStuff printed out, and Angular looped happily through the post.titles. Then I tried moving this stuff, verbatim, to a template file and loading it appropriately...
app.directive('ngPostList', function() {
return{
restrict: 'E',
templateUrl: 'postlist.html'
}
});
This part... only sorta worked. While I was still getting data (returned it in console.log), and I was still getting someDataStuff to come back, it was no actually looping through the data.
Is there something in app.directive I'm missing to make it pass data on to the template I'm now using?
Your template should also take the controller, otherwise it is outside the scope and you are one level further down and you would have to call $parent.post.title etc... to reach the proper parent scope with the data.
try:
app.directive('ngPostList', function() {
return{
restrict: 'E',
Controller: 'postListController',
templateUrl: 'postlist.html'
}
});
Overall, pick up one of the Chrome extensions to debug Angular, like ng-inspector, so you can see what scope has what data and it makes your life a lot easier to debug this kind of things.
Angular issues are 95% of the time issues with scope not being what your think it is.
I have a simple ng-repeat block that looks like this:
<div ng-repeat = "Service in getServices()">
{{Service}}
</div>
The corresponding controller defines getServices()
$scope.getServices = function(){
try{
var services = [];
for (var i = 0; i < $rootScope.Store.Services.length; i++){
services.push($rootScope.Store.Services[i].ServiceID);
}
console.log('services: ' + JSON.stringify(services))
return services;
}
catch (err){
console.log('no services')
return [];
}
};
For some reason, however, I am getting no Services in my view. I know I can just repeat directly over the $rootScope and that's how I had it before but this was an effort to debug. I am getting Services in my console:
services: ["ATM","DELI","DIESEL"]
Also, when I change the getServices() function to something like this:
$scope.getservices = function(){
var test = ["a", "b", "c"];
return test;
}
It does update the view correctly. Not sure what's going on! Note that I have many other perfectly working ng-repeats in the app.
Solved
I have no idea why but after removing iscroll from this particular page, it works fine -_-
Since you mention that iScroll was the problem, have you checked there aren't any global variable collisions?
Maybe you should implement iScroll via Angular: http://ngmodules.org/modules/ng-iScroll