I am trying to extract information through facebook API into my ionic app. It shows the messages and dates correctly into my app but no images! I have uploaded the code and demo pictures in here.
Code:
.controller('FeedCtrl', function ($scope, $stateParams, OpenFB, $ionicLoading) {
$scope.show = function () {
$scope.loading = $ionicLoading.show({
content: 'Loading User Feed(s)...'
});
};
$scope.hide = function () {
$scope.loading.hide();
};
function loadFeed() {
$scope.show();
OpenFB.get('/me/feed', {
limit: 30
})
.success(function (result) {
$scope.hide();
$scope.items = result.data;
// Used with pull-to-refresh
$scope.$broadcast('scroll.refreshComplete');
})
.error(function (data) {
$scope.hide();
alert(data.error.message);
});
}
**[<!---ionic---->][1]**
<div ng-repeat="item in items" class="list card">
<div class="item item-avatar">
<img src="https://graph.facebook.com/{{ item.from.id }}/picture" />
<h2>{{item.name}}</h2>
<p>{{item.created_time | date:'MMM d, y h:mma'}}</p>
</div>
<div class="item item-body">
<p ng-if="item.story">{{item.story}}</p>
<p>{{item.message}}</p>
<h2>{{item.from.id}}</h2>
<img ng-if="item.picture" ng-src="{{item.picture}}" />
</div>
</div>
And
Related
I have made a directive in which a single template is using for three functions in a controller. The model for the fields are same. I want to hide a field if the directive is called third time.
<div class="active tab-pane " ng-if="linkid === '1'">
<mallsonline-product info="active_products"></mallsonline-product>
</div>
<!--Active products list ends here -->
<!-- Get Inactive Products -->
<div class="active tab-pane" ng-if="linkid === '2'" >
<mallsonline-product info="inactive_products"></mallsonline-product>
</div>
<!--Get most viewed products ends here -->
<div class="active tab-pane" ng-if="linkid === '3'" >
<mallsonline-product info="mostviewed_products"></mallsonline-product>
</div>
My controller looks something like this
mainControllers.controller('DashboardController', ['$scope', '$http', '$routeParams', '$cookies', '$rootScope', function ($scope, $http, $routeParams, $cookies, $rootScope) {
/* Getting all grid links */
$scope.grLinks = function (Id) {
console.log(Id);
$scope.linkid = Id;
};
/* Getting all grid links ends here */
/* Getting all active product list */
$scope.active_product = function () {
$http.get('js/active-products.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.active_products = data.items;
console.log($scope.active_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all active product ends here */
/* Getting all inactive product */
$scope.inactive_product = function () {
$http.get('js/inactive-products.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.inactive_products = data.items;
console.log($scope.inactive_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all inactive product */
/* Getting all most viewed products */
$scope.most_viewed = function () {
$http.get('js/most-viewed.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.mostviewed_products = data.items;
console.log($scope.mostviewed_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all most viewed products */
$scope.active_product();
$scope.inactive_product();
$scope.most_viewed();
}]);
/* Active products / Inactive and most viewed Directive */
mainControllers.directive('mallsonlineProduct', function () {
return {
restrict: 'E',
scope: {
productInfo: '=info'
},
templateUrl: 'directives/dashboard_product.html'
};
});
/* Active products / Inactive directive ends here*/
and the template looks like this
<li class="bord-1-solid-ccc mg-bt-25" ng-repeat="active_products in productInfo">
<article class="aa-properties-item mg-top-0-notimp">
<a class="aa-properties-item-img" href="#/product">
<img alt="img" class="twohun-oneseventy" src="img/item/6.jpg">
</a>
<div class="aa-properties-item-content">
<div class="aa-properties-about padding-0-notimp">
<h5>{{active_products.name}}</h5>
<p class="font-size-11-imp"><i class="fa fa-building-o" aria-hidden="true"></i> {{active_products.mall.name}}</p>
<p class="font-size-11-imp"><i class="fa fa-map-marker" aria-hidden="true"></i> {{active_products.mall.address}}</p>
<p class="font-size-11-imp"><i class="fa fa-phone" aria-hidden="true"></i> {{active_products.shop.telephone}}</p>
<p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true"></i> {{active_products.views}}</p>
</div>
</div>
</article>
</li>
all the fields are present in the model I want to show the active_products.view only when info="mostviewed_products". How can I achieve this ?
Had passed "linkid" in directive to know the current linkid value in template
Please make following changes
Directive
mainControllers.directive('mallsonlineProduct', function () {
return {
restrict: 'E',
scope: {
productInfo: '=info',
linkid:'=linkid'
},
templateUrl: 'directives/dashboard_product.html'
};
});
Html
<div class="active tab-pane " ng-if="linkid === '1'">
<mallsonline-product info="active_products" linkid="linkid"></mallsonline-product>
</div>
<!--Active products list ends here -->
<!-- Get Inactive Products -->
<div class="active tab-pane" ng-if="linkid === '2'" >
<mallsonline-product info="inactive_products" linkid="linkid"></mallsonline-product>
</div>
<!--Get most viewed products ends here -->
<div class="active tab-pane" ng-if="linkid === '3'" >
<mallsonline-product info="mostviewed_products" linkid="linkid"></mallsonline-product>
</div>
In template ('directives/dashboard_product.html')
<p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true" ng-if="linkid==3"></i> {{active_products.views}}</p>
Hope this will resolve your issue.
I just learning about ionic. I want to make a service to my controller.
But when i make and run, there's error like this :
ionic.bundle.js:26794 Error: [$injector:unpr] Unknown provider: scoreServiceProvider <- scoreService <- datarateCtrl
Here my service.js code :
angular.module('starter.services', [])
.factory('FirstService', function($http) {
var baseUrl = 'http://192.168.0.101/xxx/grabdata/';
return {
getAll: function() {
return $http.get(baseUrl+'select.php');
},
getId: function (beritaId){
return $http.get(baseUrl+'select_id.php?id='+beritaId);
}
};
});
var StudentService = angular.module('ionicApp', [ionic])
StudentService.factory('scoreService', function($http) {
var baseUrl = 'http://192.168.0.101/xxx/grabdata/';
return {
getAll: function() {
return $http.get(baseUrl+'selectxxxx.php');
}
};
});
Here my controller.js code :
.controller('datarateCtrl', function($scope,$state, scoreService,$timeout, $ionicLoading){
$scope.showData = function() {
scoreService.getAll().success(function(data) {
$scope.datarate = data;
}).finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
$scope.reload = function (){
$state.go('tab.klasemen');
};
// Setup the loader
$scope.loading = $ionicLoading.show({
content: '<i class="icon ion-load-a"></i>',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 50,
showDelay: 0
});
$timeout(function () {
$scope.showData();
$ionicLoading.hide();
}, 2000);
})
Here my html code (klasemen.html)
<html ng-app="ionicApp">
<ion-header-bar class="bar bar-header bar-positive" align-title="center">
<h1 class="title">xxxx</h1>
</ion-header-bar>
<ion-view>
<ion-content padding="false" class="has-header">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="showData()">
</ion-refresher>
<div class="row header">
<div class="col">xx</div>
<div class="col">xx</div>
<div class="col">xx</div>
<div class="col">xx</div>
<div class="col">xx</div>
<div class="col">xx</div>
</div>
<div class="row" ng-repeat="data in datarate">
<div class="col">{{data.xx}}</div>
<div class="col">{{data.xx}}</div>
<div class="col">{{data.xx}}</div>
<div class="col">{{data.xx}}</div>
<div class="col">{{data.xx}}</div>
<div class="col">{{data.xx}}</div>
</div>
</ion-content>
Here my app.js
.state('tab.klasemen', {
url: '/klasemen',
views: {
'tab-klasemen': {
templateUrl: 'templates/klasemen.html',
controller: 'datarateCtrl'
}
}
})
can anyone tell what i miss or what is error with my code?
Thank you so much guys.
In your controller.js your code should like this.
angular.module('ionicApp')
.controller('datarateCtrl', function($scope,$state, scoreService,$timeout, $ionicLoading){
// script goes here
//$scope.showData
});
I'm real newbie in ionic, html, angular and java script. I have an app that take some JSON data and display it with ng-repeat.
But when I tried to switch to the next slide, it overlap. and I have an $interval that refresh JSON each 5 sec, it reset to the first slide also.
here html:
<ion-view title="home">
<ion-content ng-controller="temperatureCtrl">
<div ng-init="init()"></div>
<ion-slides options="options" slider="data.slider" >
<ion-slide-page ng-repeat="channel in channels">
<div class="list">
<h2><center>canal# {{channel.canal}}</center></h2>
<br/>
<center>
<button class="button button-stable" ng-click="switchChannel(channel, channel.canal)" ng-model="channel.status">
{{channel.status}}
</button>
</center>
<div class="list">
<label class="item item-input">
<input type="text" style="text-align:center;" placeholder="Channel name" ng-model="channel.name" ng-focus="stopRefresh()" ng-blur="restartRefresh()">
</label>
</div>
<h4><center>
<span class="Ainput" ><h3>{{channel.temperature}}ÂșC</h3></span>
</center></h4>
<h3><center>Setpoint= {{channel.setPoint}}</center></h3><br>
<div class="item range range-positive">
<i class="icon ion-minus-round"></i>
<input type="range" name="setpoint" min="5" max="30" step="0.5" value="33" ng-model="channel.setPoint" ng-focus="stopRefresh()" ng-blur="restartRefresh()">
<i class="icon ion-plus-round"></i>
</div>
<centrer>
<button class="button button-dark button-block padding " ng-click="channelsClk(channel, channel.setPoint)">ok</button>
</centrer>
<h3>
<span class="permRun">{{channel.permission}}</span>
</h3>
<h3>
<span class="AoutputChannel">{{channel.percentOut}}%</span>
</h3>
</ion-slide-page>
</ion-slides>
</ion-content>
and the controler:
main.controller("temperatureCtrl", ["$scope", "$interval", "ArduinoService", function($scope, $interval, service) {
var autoRefresh;
$scope.channels = [];
$scope.options = {
loop: false,
effect: 'fade',
speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
$scope.slider = $scope.data.slider;
})
function startRefresh(){
autoRefresh = $interval(function() {
updateAjax();
}, 5000);
}
function updateAjax() {
service.getChannels(function(err, result) {//get json data
if (err) {
return alert(err);
}
// puis les mets dans le scope
$scope.channels = result.channels;
})
};
$scope.init = function() { //on load page first get data
updateAjax();
startRefresh()
}
$scope.switchChannel = function($scope, channel) { // change name function
var switchCh = {canal : $scope.canal, status : $scope.status}
service.switchChannel(switchCh, function() {
});
updateAjax();
};
$scope.channelsClk = function($scope, channel) {
var chanObj = {setPoint : $scope.setPoint, name : $scope.name, canal : $scope.canal
};
service.putChannels(chanObj, function() {
});
}
$scope.stopRefresh = function() { //ng-mousedown
$interval.cancel(autoRefresh);
};
$scope.restartRefresh = function() {
startRefresh();
};
$scope.$on('$destroy', function() {
// Make sure that the interval is destroyed too
$scope.stopRefresh();
});
}]);
remove option fade solve the problem.
$scope.options = {
loop: false,
//effect: 'fade', /* <-- */
speed: 500,
}
On my HTML code I want to display either a gallery of images or just one image ... The templates are different:
if (mode = 0) {
<div data-ng-controller="ImageController" class="gallery">
<div data-ng-repeat='image in model.images'>
<img data-ng-src="image.Url"/>
// Some more code
</div>
</div>
} else {
<div data-ng-controller="ImageController" class="image">
<img src="data-ng-src="{image.Url}" />
// Other code
</div>
}
On angular controller I have the following:
application.controller('ImageController', function ImageController($scope, ImageService) {
$scope.model = {
images: []
}
var init = function () {
ImageService.GetList($scope.model.pages.instagram)
.success(function (data, status, headers, config) {
$scope.model.images = $scope.model.images.concat(data.Images);
})
.error(function (data, status, headers, config) { });
}
How to modify the controller to display either a list of images or one single image?
HTML
<script type="text/javascript">
window.isMultiple = '#RazorIsMultiple';
</script>
<div data-ng-controller="ImageController" class="gallery">
<!--<input type="hidden" data-ng-model="mode.isMultiple" value="#RazorIsMultiple"/>-->
<div data-ng-if="mode.isMultiple" data-ng-repeat='image in model.images'>
<img data-ng-src="image.Url"/>
// Some more code
</div>
<img data-ng-if="!mode.isMultiple" src="data-ng-src="{image.Url}" />
// Other code
</div>
and in your controller, add something like that :
during init of the controller
$scope.mode = {};
//$scope.$watch('mode.isMultiple', function(newVal, oldVal){
// //insert your logic here
//});
$scope.mode.isMultiple = window.isMultiple;
EDIT: image + code + repo
using ionic framwork
Above image is showing how the drawer tab renders the view twice on top of each other.
This happens when in /drawer => /drawer/:itemId/edit' => click on the Drawer tab
it goes back to normal when clicking on the any other tab and going back to the drawer.
my repo is
https://github.com/sebabelmar/lime
this is my app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: false,
templateUrl: "templates/tabs.html",
controller: 'TabsCtrl'
})
// Each tab has its own nav history stack:
.state('tab.requests', {
url: '/requests',
views: {
'tab-requests': {
templateUrl: 'templates/tab-requests.html',
controller: 'RequestsCtrl'
}
}
})
.state('tab.drawer', {
url: '/drawer',
views: {
'tab-drawer': {
templateUrl: 'templates/tab-drawer.html',
controller: 'DrawerCtrl'
}
}
})
.state('tab.item-detail-id', { //changed
url: '/drawer/:itemId',
views: {
'tab-drawer': {
templateUrl: 'templates/item-detail-id.html',
controller: 'ItemDetailIdCtrl'
}
}
})
.state('tab.item-detail', { //changed
url: '/drawer/:itemId/edit',
views: {
'tab-drawer': {
templateUrl: 'templates/item-detail.html',
controller: 'ItemDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/account');
});
this is my controller
angular.module('starter.controllers', [])
.controller('TabsCtrl', function($scope, User, Items, Requests) {
$scope.userLogged = false;
User.authenticate.then(function() {
console.log(User.loggedIn.username)
Items.sync(User.loggedIn.username);
Requests.sync(User.loggedIn.username);
$scope.userLogged = true;
$scope.user = User.loggedIn;
});
})
.controller('RequestsCtrl', function($scope, User, Sync, Requests) {
Requests.retrieved.then(function(){
$scope.requests = Requests.all;
console.log("from the controller", $scope.requests);
})
//keeps sync with the Factory
setInterval(function(){
$scope.requests = Requests.all },
1000);
})
.controller('ItemDetailIdCtrl', function(){
})
.controller('DrawerCtrl', function($scope, Sync, User, Items) {
var sync;
Items.retrieved.then(function(){
$scope.drawer = Items.drawer;
$scope.items = Items.all;
})
//keeps sync with the Factory
setInterval(function(){
$scope.items = Items.all },
1000);
$scope.newItem = {};
$scope.addToDrawer = function(){
console.log($scope.drawer)
$scope.newItem.owner = $scope.drawer.owner
//adds the item to Items collections
var newItemRef = Sync("items").push($scope.newItem);
itemId = newItemRef.key();
//adds item to the drawer
sync.child(itemId).set("true");
console.log("Item" + $scope.newItem.description + "added with success");
$scope.newItem = {};
}
$scope.isProvider = function(){
if(User.loggedIn.provider)
return false
else
return true
};
$scope.addRequest = function(itemKey){
Sync("requests").push({
item: itemKey,
owner: User.loggedIn.username,
date: Date.now()
})
console.log("Request added")
}
})
.controller('ItemDetailCtrl', function($scope, $stateParams, Sync, User) {
Sync("items").child($stateParams.itemId).on("value", function(snapshot){
$scope.key = snapshot.key();
$scope.item = snapshot.val();
$scope.item_edit = angular.copy($scope.item)
console.log($scope.item)
})
$scope.edit = function(){
Sync("items").child($stateParams.itemId).update({
name: $scope.item_edit.name,
desc: $scope.item_edit.desc,
price: $scope.item_edit.price
})
}
})
.controller('AccountCtrl', function($scope, $q, Sync, Auth, User, Items, Requests) {
var defer = $q.defer();
var sync = Sync("users");
sync.on("value", function(snap){
$scope.users = snap.val();
}, function(errorObject){
console.log("The read failed" + errorObject.code)
})
$scope.newUser = {};
$scope.settings = {
isFemale: true
};
$scope.addNewAuth = function(){
Auth.createUser({
email: $scope.newUser.email,
password: $scope.newUser.password
}, function(error, userData){
if (error) {
console.log("Error creating user" + error);
} else {
$scope.uid = userData.uid;
console.log("Created user authentication for" + $scope.newUser.username)
defer.resolve();
}
})
}
$scope.logIn = function(user){
Auth.authWithPassword({
email: user.email,
password: user.password
}, function(error, authData) {
if(error) {
console.log("Login failed", error)
} else {
console.log("User" + user.email + " has loggedIn", authData);
user_path = "users/" + authData.uid
$scope.authUser();
$scope.loginUser = {};
}
})
}
$scope.register = function(){
$scope.newUser.username = $scope.newUser.email.replace(/#.*/, '')
$scope.addNewAuth();
defer.promise.then(function(){
sync.child($scope.uid).set($scope.newUser)
Sync("drawers").push({owner: $scope.newUser.username})
console.log("User" + $scope.newUser.username + "registered with success")
$scope.logIn($scope.newUser)
$scope.newUser = {};
})
};
$scope.logOut = function(){Auth.unauth();$scope.userLogged=false};
$scope.alwaysHide = function(){return true}
});
this is my drawer where you can click on edit icon to go into item details
<ion-view view-title="Drawer" ng-if="userLogged" >
<ion-header-bar class="bar-stable">
<h1 class="title">Drawer</h1>
<div class="buttons">
<button class="button button-icon ion-plus-circled" ng-click="upload()"></button>
</div>
</ion-header-bar>
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)" >
<ion-slide ng-repeat="(key, item) in items">
<div class="slide-container">
<div class="item item-avatar" >
<img ng-src="{{item.pic}}">
<h2>{{item.name}}</h2>
<p>{{item.desc}}</p>
<div class='price'>
$ {{item.price}}
<!-- <div class='ion-cash'></div> -->
</div>
</div>
<div class="item-image">
<img class="item-pic" ng-src="{{item.pic}}">
</div>
</div>
<!-- This needs Ng way to do ng class and logic to show and hide -->
<div class="buttons">
<a class="edit-button dark" ng-href="#/tab/drawer/{{key}}/edit" ng-show="isProvider()">
<i class="icon ion-edit"></i>
</a>
<a class="item item-icon-left" href="#" ng-click="addRequest(key)" ng-hide="isProvider()">
<i class="icon ion-code-download"></i>
</a>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
here is item detail edit
<ion-view >
<ion-header-bar class="bar-stable">
<h1 class="title">{{item.name}}</h1>
</ion-header-bar>
<ion-content>
<div class="slide-container">
<div class="item item-avatar" >
<img ng-src="{{item.pic}}">
<h2><input type="text" value="{{item.name}}" ng-model="item_edit.name"></h2>
<p><input type="text" value="{{item.desc}}" ng-model="item_edit.desc"></p>
<p id='dollar'>$</p>
<div class='price-edit'>
<label class="price-label item-input">
<input class="price-input" type="text" value="{{item.price}}" ng-model="item_edit.price">
</label>
</div>
</div>
<div class="item-image">
<img class="item-pic" ng-src="{{item.pic}}">
</div>
</div>
<div class=" buttons">
<div class="button-edit">
<a class="edit-button dark" href='' ng-click="edit()">
<i class="icon ion-edit"></i>
</a>
</div>
</div>
</ion-content>
</ion-view>
thanks for reading :D if there is any more info you need inorder to solve my issue i ll gladly provide but i have posted my repo up top