Javascript is not being loaded within ui-view. The widget on the INDEX PAGE loads fine, the widget on the HOME PAGE does not. Is there a way maybe refresh the view without actually causing a refresh? Or any other suggestions?
-----------------------------------------------
INDEX PAGE:
<div class="page-content-wrap">
<div class="block">
<div class="widget widget-default widget-carousel">
<div class="owl-carousel" id="owl-example">
<div>
<div class="widget-title">Total Visitors</div>
<div class="widget-subtitle">27/08/2014 15:23</div>
<div class="widget-int">3,548</div>
</div>
<div>
<div class="widget-title">Returned</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,695</div>
</div>
<div>
<div class="widget-title">New</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,977</div>
</div>
</div>
</div>
<div ui-view="main">
</div>
</div>
</div>
-----------------------------------------------
HOME PAGE VIEW:
<div class="well">
<div class="block">
<div class="widget widget-default widget-carousel">
<div class="owl-carousel" id="owl-example">
<div>
<div class="widget-title">Total Visitors</div>
<div class="widget-subtitle">27/08/2014 15:23</div>
<div class="widget-int">3,548</div>
</div>
<div>
<div class="widget-title">Returned</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,695</div>
</div>
<div>
<div class="widget-title">New</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,977</div>
</div>
</div>
</div>
<div ui-view="main">
</div>
</div>
</div>
-----------------------------------------------
APP.JS
stateProvider
.state('home', {
module: 'public',
url: '/home',
name: 'home',
views: {
'main#': {
templateUrl: 'home.do',
},
},
data: {
displayName: 'Home',
}
})
-----------------------------------------------
Thanks in advance for you assistance.
Related
the data is showing in the log but its now showing in my page.i wanted to load the data . what is the problem?
function AppController($scope, TestFactory) {
/* console.log("AppController is now available.");*/
$scope.testdata= [];
TestFactory.getData().then(function(response) {
$scope.testdata = response.data;
console.log("Data:", $scope.testdata);
})
}
<ion-slide-page ng-repeat="event in testdata">
<div class="now-viewport">
<div class="event-image">
</div>
<div class="event-placeholder">
<div class="event-title">{{ event.message}}</div>
<div class="event-details">
</div>
</div>
</div>
</ion-slide-page>
try the following code below
<ion-slide-page ng-repeat="event in testdata.message">
<div class="now-viewport">
<div class="event-image">
<div class="event-placeholder">
<div class="event-title">{{event}}</div>
<div class="event-details"></div>
</div>
</div>
</div>
</ion-slide-page>
Your response is an object where message is an array of strings, try as follows,
<ion-slide-page ng-repeat="event in testdata.message">
<div class="now-viewport">
<div class="event-image">
<div class="event-placeholder">
<div class="event-title">{{event}}</div>
<div class="event-details"></div>
</div>
</div>
</div>
</ion-slide-page>
I am learning as I go with my first Angular project and have ran into an issue.
Goal: When an link is clicked in a given .html template placed in with ng-include, I want it to change the value of $scope.selectedLocation
The issue: The value of $scope.selectedLocation does not change.
I read that the ng-include creates a child scope, so in order to change the parent scope variable, you could place $parent in front of the value. I have tried this and it does not work.
Main index page:
<body ng-app="photoApp" id="bodyDiv" >
<div ng-controller="PhotoGallery">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
</div>
<div ng-switch-when="loc1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="loc2">
<div ng-include="'file2.html'"></div>
</div>
</ng-switch>
</div>
</div>
</body>
home.html code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
photoApp.js code:
var photoApp= angular.module('photoApp', []);
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.selectedLocation ="home";
}
The issue is that you're binding to a primitive in an inherited scope. To fix it you should pass an object:
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.vm = {
selectedLocation: "home"
}
}
Html
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
ng-include creates a new scope that inherits the parent (controller) scope through the prototype chain. In javascript you can't replace the value of the shadowed inherited property. Passing an object works as you're changing a property on a pointer to the object.
https://github.com/angular/angular.js/wiki/Understanding-Scopes
You seem to have misnamed your app variable. Either name westonPhotographyApp photoApp or vice-versa:
var photoApp = angular.module('photoApp', []);
photoApp.controller('PhotoGallery', function($scope) {
$scope.selectedLocation ="home";
}
Anyways, you could improve on your design:
You could use controllerAs syntax. It names your controller and makes it accessible throughout descendant scopes:
Index:
<div ng-controller="PhotoGallery as pgCtrl">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
...
Home:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
With your controller:
photoApp.controller('PhotoGallery', function() {
var vm = this;
vm.selectedLocation ="home";
}
I am working with Ionic framework.
I've got two templates both of which use the same "ListController" controller:
1) A list of products.
2) A detailed view of a specific product.
Both templates have a counter field which should be updated when user adds or removes products.
On the header I have a counter for the sum of all products.
What I need is to automatically be updated the fields(specific product counter, total counter) in two templates. When I say automatically I mean when the user adds products in the first template then these should be updated to the second one.
Here's my first template:
<ion-list>
<ion-item class="noPadding" ng-repeat="item in meatTypes" href="#/{{item.imgname}}">
<div class="row counterLine relative noPadding">
<img class="counterBg" src="img/counter.png" alt="pansetes" align="right"/>
<span class="itemCounter" id="product_{{item.id}}">0</span>
</div>
<div class="row">
<div class="col relative">
<img class="itemImg" src="img/{{item.imgname}}.png" alt="pansetes"/>
</div>
<div class="col relative">
<ul class="centerize">
<li class="itemTitle ">{{item.name}}</li>
<li class="itemSubtitle">{{item.subname}}</li>
</ul>
</div>
<div class="col relative">
<ul class="centerize">
<li class="itemPrice">{{item.price}}€</li>
<li class="itemDiscount">{{item.productdiscount}}%</li>
</ul>
</div>
<div class="col relative">
<button class="addMore centerize" id="addMore" onclick="return false">+</button>
</div>
</div>
</ion-item>
</ion-list>
Here's my second template:
<ion-list>
<ion-item class="noPadding" ng-repeat="item in meatTypes | filter: {imgname : whichproduct}">
<div class="row noPadding">
<div class="col col-20 noPadding item-text-wrap">
<p class="expires">
Κατανάλωση εντός </br> <strong>4</strong> </br>Hμερών.
</p>
</div>
<div class="col noPadding col-60">
<img class="detailsImg" src="/img/{{item.imgname}}.png" alt="{{item.name}}"/>
</div>
<div class="col col-20 noPadding">
<div class="row noPadding">
<div class="col noPadding">
<img class="detailsCounterBg" src="img/counter.png" alt="pansetes" align="right"/>
<span class="itemCounter" id="detailsCounter">{{counters[item.id]}}</span>
</div>
</div>
<div class="row noPadding">
<div class="col noPadding">
<ul>
<li><button class="addMore" id="addMore">+</button></li>
<li><button class="addMore" id="subMore">-</button></li>
</ul>
</div>
</div>
</div>
</div>
</ion-item>
</ion-list>
And here's my app.js router and controller:
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('list')
$stateProvider
.state('list', {
url: '/list',
templateUrl: '/templates/product-list.html'
})
$stateProvider
.state('details', {
url: '/:aId',
templateUrl: '/templates/detail.html',
controller: "ListController"
})
})
.controller('ListController',function($scope, $http, $state){
$http.get('js/data.json').success(function(data){
$scope.meatTypes = data;
$scope.whichproduct = $state.params.aId;
$scope.total = $('#totalCounter').html();
$scope.counters = [];
$(".itemCounter").each(function(){
$scope.counters.push($(this).text());
});
});
});
For now I have found a permanent solution as you can see in my controller but I think it misses something.
here's a :screenshot
Can any body tell me how to display dygraph in listview using json response.
Here is my response from which i need to make dygraph..i goggled about it but its did'nt get any clue about it.
http://piratepad.net/ep/pad/view/ro.y8PksMhLIhk/latest
this is how i am doing :-
In My Index.html :-
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/dygraph-combined-dev.js"></script>
<script src="js/dygraph-combined.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
In My Home.html :-
<div ng-repeat="entry in listnew">
<div class="bar bar-dark bar-head">
<h2>Basestation {{entry.baseID}} {{entry.nickname}}</h2>
</div>
<ion-list>
<div ng-repeat="scout in entry.scouts">
<div class="wrap_home">
<ion-item class="item-accordion" ng-click="toggleGroup(scout)"
ng-class="{active: isGroupShown(scout)}" ng-init="showGraph(scout.tempHistory)">
<div class="row">
<div class="col col-25">
<div class="top_spc">
<b>{{scout.moduleID}}</b>
</div>
</div>
<div class="col col-25">
<div class="top_spc">{{scout.nickname}}</div>
</div>
<div class="col col-20">
<div class="top_spc temp_mid">
{{scout.temperature}}<sup>o</sup>C
</div>
</div>
<div class="col">
<div class="batt_icon ">
<img src="img/battery.png" alt="battery" />
</div>
</div>
<div class="col">
<div ng-if="scout.power=='0'">
<div class="plug_icon red">
<img src="img/plug.png" alt="plug" />
</div>
</div>
<div ng-if="scout.power=='1'">
<div class="plug_icon">
<img src="img/plug.png" alt="plug" />
</div>
</div>
</div>
</div>
</ion-item>
<ion-item class="item-accordion sm-item"
ng-show="isGroupShown(scout)">
<div class="sub_detail">
<div class="row">
<div class="col col-50">
<b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
min ago)</span>
</div>
<div class="col col-50">{{scout.tempLow}}(L),
{{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
</div>
<div id=graph>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
</div>
In my controller.js :-
$scope.showGraph = function(data) {
g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
data, {
// options go here. See http://dygraphs.com/options.html
legend : 'always',
animatedZooms : true,
title : 'dygraphs chart template'
});
};
Here data is which i displayed in pirate-pad.
The problem is I am getting dygraph only at first item but not on remaining.
Here you go :-
In Your Controller.js Define :-
$scope.graphs = [
{
data : data(Place your JavaScript Array here),
},
];
})
.directive(
'graph',
function() {
return {
restrict : 'E',
scope : {
data : '=',
opts : '='
},
template : '<div class="graph"></div><div class="labels"></div>',
link : function(scope, elem, attrs) {
var graph = new Dygraph(elem.children()[0],
scope.data, scope.opts);
}
};
});
In your Home.html define :-
<ion-list>
<div ng-repeat="scout in entry.scouts" >
<div class="wrap_home">
<ion-item class="item-accordion" ng-click="toggleGroup(scout,scout.tempHistory)"
ng-class="{active: isGroupShown(scout)}" >
<div class="row">
<div class="col col-25">
<div class="top_spc">
<b>{{scout.moduleID}}</b>
</div>
</div>
<div class="col col-25">
<div class="top_spc">{{scout.nickname}}</div>
</div>
<div class="col col-20">
<div class="top_spc temp_mid">
{{scout.temperature}}<sup>o</sup>C
</div>
</div>
<div class="col">
<div class="batt_icon ">
<img src="img/battery.png" alt="battery" />
</div>
</div>
<div class="col">
<div ng-if="scout.power=='0'">
<div class="plug_icon red">
<img src="img/plug.png" alt="plug" />
</div>
</div>
<div ng-if="scout.power=='1'">
<div class="plug_icon">
<img src="img/plug.png" alt="plug" />
</div>
</div>
</div>
</div>
</ion-item>
<ion-item class="item-accordion sm-item"
ng-show="isGroupShown(scout)">
<div class="sub_detail">
<div class="row">
<div class="col col-50">
<b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
min ago)</span>
</div>
<div class="col col-50">{{scout.tempLow}}(L),
{{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
</div>
<div >
<graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
Dygraph have some problem with ng-repeat As I read in the link given bellow :-
Dygraphs not working with ng-repeat
I have a problem with angularJS.
I have a controller that execute a loop. For every element in the list I display all the informations.
Inside every loop, I added another controller (I guess is not a best practice already).
From the inner controller i want to access data from the outer controller.
Now, I don't mind doing this by assigning metadata on the html code, or by javascript code in the controller.
Here what I have done:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<div ng-controller="PostHeart" class="likeHolder" ng-init="isActive={{e.Post.isActive}}">
<button ng-click="toggleActive($index)"
ng-class="{true: 'loveButtonActive', false: 'loveButton'}[isActive]"
class="">❤</button>
</div>
</div>
</div>
</div>
</div>
This code: ng-init="isActive={{e.Post.isActive}} doesn't work as supposed.
I also tried to assign with data-myData="{{e.Post.isActive}} but at runtime when i tried to access myData from the controller it does access the string {{e.Post.isActive}} instead of accessing the replacement of that placeholder.
Any idea?
Create a directive:
yourModule.directive('postHeart', function() {
return {
restrict: 'E',
scope: {
'e': '=',
'index': '='
},
controller: function($scope) {
var isActive = $scope.e.Post.isActive;
$scope.btnClass = isActive ? 'loveButtonActive' : 'loveButton';
$scope.toggleActive = function(index) {
var postId = $scope.e.Post.id; // access data from the parent controller
// ...
};
},
template: "<button ng-click=\"toggleActive(index)\" ng-class=\"btnClass\">❤</button>"
};
});
Then use it in template:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<post-heart e="e" index="$index" class="likeHolder"></post-heart>
</div>
</div>
</div>
</div>