I've been digging thru the archives and haven't found exactly what I am looking for, so since I am blocked and on a deadline, hoping someone here with more experience can help me out.
Overall team was happy with what I gave them but they are asking for start/stop button to pause the auto-refresh when they need to grab details about the ads that serve in the page. I've been hacking at it and know I am close, but can someone help me here?
Here's my code so far:
<!doctype html>
<html>
<head>
<title>Demand Tag Testing- Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script type="text/javascript" language="javascript">
/** Function to refresh the page at specified interval. **/
function autoRefresh(refreshPeriod) {
setTimeout("window.location.reload();",refreshPeriod);
}
</script>
<script type="text/javascript" language="javascript">
/** Function to stop refreshing the page. **/
function stopRefresh()
{
clearTimeout(refreshPeriod);
window.location.hash = 'stop'
}
/** Function to start refreshing the page if stopped. **/
function autoRefresh(refreshPeriod) {
setTimeout("window.location.reload();",refreshPeriod);
window.location.hash = 'start'
}
</script>
</head>
<body onload="autoRefresh(60000);">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tag Tester :: Demand Partners</a>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Demand Tag Testing</h1>
<p>This is a template for testing the tags we get from Demand Partners. It includes scripts that auto-refresh the page every 60 seconds and keeps track of the number of page views for you. You can also manually refresh from cache or the server using the buttons below.</p>
<ul>
<li>There are three ad slots below, load 1 tag per slot.</li>
<li>Allow test to run until pageview counter reaches 500</li>
<li>The pageview counter is PER SESSION, so if you close your browser, you will lose the count</li>
</ul>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-6">
<h2>Ad Slot #1</h2>
<p>Paste Ad Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #2</h2>
<p>Paste Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #3</h2>
<p>Paste Tags Here</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h2>Page Reload Count:</h2>
<script type="text/javascript" language="javascript">
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.write("The page has been reloaded " + sessionStorage.clickcount + " time(s) in this session.");
</script>
<div class="btn-group">
<a class="btn btn-success" onclick="startRefresh()" id="start">Start Refresh</a>
<a class="btn btn-danger" onclick="stopRefresh()" id="stop">Stop Refresh</a>
<p id="console"></p>
</div>
</div>
<div class="col-lg-4">
<h2>Reload Cached Page:</h2>
<a class="btn btn-success" href="javascript:window.location.reload();">Click To Reload From Cache</a>
</div>
<div class="col-lg-4">
<h2>Reload From Server</h2>
<button class="btn btn-success" onclick="window.location.reload(true);">Click To Reload From Server</button>
</div>
</div>
<hr>
<footer>
<p>© Company Name, Inc 2014</p>
</footer>
</div>
<!-- /container -->
</body>
</html>
I just need help linking those start/stop buttons to my refresh code and some output that lets users know when it's toggled, so any help anyone can provide here would be greatly appreciated!
You have few issues there, first of all you don't have start function but two autoRefresh which is a typo I guess .. Second, you need to declare global variable and store the timeout in there. Here is updated code which should work:
<!doctype html>
<html>
<head>
<title>Demand Tag Testing- Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script type="text/javascript" language="javascript">
var myRefreshTimeout;
/** Function to refresh the page at specified interval. **/
function startRefresh(refreshPeriod) {
myRefreshTimeout = setTimeout("window.location.reload();",refreshPeriod);
}
/** Function to stop refreshing the page. **/
function stopRefresh() {
clearTimeout(myRefreshTimeout);
window.location.hash = 'stop'
}
</script>
</head>
<body onload="startRefresh(60000);">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tag Tester :: Demand Partners</a>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Demand Tag Testing</h1>
<p>This is a template for testing the tags we get from Demand Partners. It includes scripts that auto-refresh the page every 60 seconds and keeps track of the number of page views for you. You can also manually refresh from cache or the server using the buttons below.</p>
<ul>
<li>There are three ad slots below, load 1 tag per slot.</li>
<li>Allow test to run until pageview counter reaches 500</li>
<li>The pageview counter is PER SESSION, so if you close your browser, you will lose the count</li>
</ul>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-6">
<h2>Ad Slot #1</h2>
<p>Paste Ad Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #2</h2>
<p>Paste Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #3</h2>
<p>Paste Tags Here</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h2>Page Reload Count:</h2>
<script type="text/javascript" language="javascript">
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.write("The page has been reloaded " + sessionStorage.clickcount + " time(s) in this session.");
</script>
<div class="btn-group">
<a class="btn btn-success" onclick="startRefresh()" id="start">Start Refresh</a>
<a class="btn btn-danger" onclick="stopRefresh()" id="stop">Stop Refresh</a>
<p id="console"></p>
</div>
</div>
<div class="col-lg-4">
<h2>Reload Cached Page:</h2>
<a class="btn btn-success" href="javascript:window.location.reload();">Click To Reload From Cache</a>
</div>
<div class="col-lg-4">
<h2>Reload From Server</h2>
<button class="btn btn-success" onclick="window.location.reload(true);">Click To Reload From Server</button>
</div>
</div>
<hr>
<footer>
<p>© Company Name, Inc 2014</p>
</footer>
</div>
<!-- /container -->
</body>
</html>
Related
I want something like the attached image. I am able to do the same look except blurring the background. I tried making it using angularjs. I am unable to blur. How can I make it as the below image. I have used the below angular code to make the page blur. I have searched and I have got blurring a page except a form. But in this case it is not a form. I want to blur the page except div content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="container">
<center>
<h3 class="container">Select a type</h3>
<div>This is to test the page:
<div class = "btn-group pull-center">
<button type = "button" class = "btn dropdown-toggle" data-toggle = "dropdown">Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
</center>
</div><br/><br/>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>This is to test the page</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-primary col-md-6">button 1</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-success col-md-6">button 2</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-warning col-md-6">button 3</div> <br/><br/>
</div>
</div>
</div>
<hr style="margin-right:9cm"></hr>
</div>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>empty space between </p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-danger col-md-6">Button 4</div><br/><br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create three containers, one for your content that doesn't exist on the form, one for the blur and one for the form content.
<div class="normal-content">
<p>Content that is on your page</div>
<div class="blur"></div>
<div class="form-content">
<p>Content that would exist on the form</p>
</div>
CSS
.blur{
position:absolute;
// We'll grow the blur box to be bigger than 100% so there isn't some weird effects that you can get with blur
width: 104%;
height: 104%;
top: -2%;
left: -2%;
filter: blur(5px);
}
I am trying to implement a search functionality using API's and JSON data, but for some reason the getJSON function just doesn't seem to work. There are no errors, the first 2 console logs work in both functions but the one inside the getJSON function does not return anything. The url is valid as the same thing happens even if I use just a hard-coded url without the getElementById functionality. I have been trying to get the code to work for the last 2 days but I just have no idea what the problem is. I would appreciate any feedback.
<!DOCTYPE html>
<html>
<head>
<title>World News</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: lightgrey;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">World News</a>
</div>
<form class="navbar-form navbar-right" action="">
<div class="input-group">
<input id="searchBar" type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button onclick="getText(); getJSON();" id="search_btn" class="btn btn-default" type="submit" href="#search">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content tab-content">
<div id="home" class="col-sm-8 text-left tab-pane fade in active">
<h1 id="homeH0">Welcome to World News</h1>
<p id="homeP0">Example of the welcoming text for the front of the page</p>
<h4 id="h0"></h4>
<p id="p0"></p>
<h4 id="h1"></h4>
<p id="p1"></p>
<h4 id="h2"></h4>
<p id="p2"></p>
<h4 id="h3"></h4>
<p id="p3"></p>
<h4 id="h4"></h4>
<p id="p4"></p>
</div>
</div>
</div>
<script type="text/javascript">
var urlSer;
function getText() {
urlSer = 'https://newsapi.org/v2/everything?' +
'q=' + document.getElementById("searchBar").value + '&' +
'SortBy=popularity&' +
'apiKey=459a144a981941ffa850e2b8c06c5b5f';
console.log(urlSer);
};
function getJSON() {
console.log(urlSer);
$.getJSON(urlSer, function(json) {
console.log(json);
for (i = 0; i <= 4; i++) {
document.getElementById('h' + i).innerHTML = json.articles['' + i].title;
document.getElementById('p' + i).innerHTML = json.articles['' + i].description;
}
});
};
</script>
</body>
</html>
Change your button from type="submit" to type="button" to prevent the form from submitting using browser default process
Right now your page is probably reloading due to the form submit
I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.
AngularJS v1.2.0rc1
I have setup an angular Model-View-Controller. It is accurately requesting data from my database and displaying the values on the html page. However, the problem I am having is when the data I am requesting changes from the current value being displayed, it is not updating the html view.
Code
Controller
var API_ORDER_ROUTE = '/api/stats';
function feedingStatsCtrl($http, $scope) {
$http.get(API_ORDER_ROUTE).success(function(data, status, headers, config) {
if (data.error) {
$scope.error = data.error;
} else {
$scope.current = data.current;
$scope.average = data.average.toFixed(2);
$scope.days_left = data.days_left ? data.days_left : 0;
$scope.days_remaining = Math.min($scope.days_left / 30 * 100.0, 100);
} // EOF else
}).error(function(data, status, headers, config) {
$scope.error = "Error fetching order statistics.";
});
}
UPDATE INCLUDING HTML CODE
HTML
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d396qusza40orc.cloudfront.net/startup/code/jquery.js"></script>
<script src="https://d396qusza40orc.cloudfront.net/startup/code/bootstrap.js"></script>
<script src="js/angular.min.js" ></script>
<script src="js/controllers.js"></script>
<script src="js/google-analytics.js"></script>
<script src="https://coinbase.com/assets/button.js"></script>
<script src="js/coinbase-post-payment.js"></script>
<link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fsocial-buttons.css">
<link rel="stylesheet" href="css/bitstarter-styles.css">
</head>
<body>
<!-- Mobile-friendly navbar adapted from example. -->
<!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"><%= name %></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>LedTest</li>
<li>Orders</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- We use row-fluid inside containers to achieve a resizable layout. -->
<!-- blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/ -->
<!-- http://stackoverflow.com/a/12270322 -->
<div class="container">
<!-- Font and paired font of .heading/.subheading and body from Google Fonts -->
<!-- www.google.com/fonts/specimen/Ubuntu -->
<!-- www.google.com/fonts/specimen/Ubuntu#pairings -->
<div class="row-fluid heading">
<div class="span12">
<h1><%= product_name %></h1>
</div>
</div>
<div class="row-fluid subheading">
<div class="span12">
<!-- Special typography from Bootstrap for lead paragraph. -->
<!-- http://twitter.github.io/bootstrap/base-css.html#typography -->
<p class="lead"><%= product_short_description %></p>
</div>
</div>
<div class="row-fluid pitch">
<div class="span5 offset1 video">
<img class="img-polaroid" src="img/480x300.gif">
</div>
<!-- We define a new 'actions' div to contain statistics, order, and share buttons.-->
<div class="span5 actions" ng-controller="feedingStatsCtrl">
<div class="row-fluid">
<div class="span8 offset2">
<div class="row-fluid statistics">
<div ng-show="!error">
<div class="span4">
<!-- linediv-l and linediv-r give dividing lines that look
different in horizontal and vertical layouts, illustrating
media queries. -->
<div class="linediv-l">
<h3>{{current}}</h3> <p>Current</p>
</div>
</div>
<div class="span4">
<div class="linediv-c">
<h3>{{average}}</h3> <p>Average</p>
</div>
</div>
<div class="span4">
<div class="linediv-r">
<h3>{{days_left}}</h3> <p>Days Left</p>
</div>
</div>
</div>
<div ng-show="error">
<h3>{{error}}</h3>
</div>
</div>
</div>
<div class="row-fluid" ng-show="!error">
<div class="span10 offset1">
<!-- Bootstrap progress bar -->
<!-- http://twitter.github.io/bootstrap/components.html#progress -->
<div class="thermometer progress active">
<div class="bar bar-success" ng-style="{'width': days_remaining+'%'}"></div>
<div class="bar bar-warning" ng-style="{'width': (100-days_remaining)+'%'}"></div>
</div>
</div>
</div>
I know the data is being requested properly. When I refresh the browser it correctly updates the three variables I am pulling from the DB. I just can't figure out why the Angular controller is not dynamically updating. Can any provide some guidance?
You may make a common mistake: try to refer a primitive variable from parent scope, in Angular, child scope can not refer a primitive type variable defined in parent scope (string, number, bool...etc), any primitive reference would create a separate variable in child scope with same value. So even $scope.current changed in parent scope, the variable in child scope won't change.
further reading about scope
You can use object to avoid this happened:
var API_ORDER_ROUTE = '/api/stats';
function feedingStatsCtrl($http, $scope) {
$scope.result = {};
$http.get(API_ORDER_ROUTE).success(function(data, status, headers, config) {
if (data.error) {
$scope.result.error = data.error;
} else {
$scope.result.current = data.current;
$scope.result.average = data.average.toFixed(2);
$scope.result.days_left = data.days_left ? data.days_left : 0;
$scope.result.days_remaining = Math.min($scope.days_left / 30 * 100.0,100);
} // EOF else
}).error(function(data, status, headers, config) {
$scope.result.error = "Error fetching order statistics.";
});
}
In template:
<div class="span8 offset2">
<div class="row-fluid statistics">
<div ng-show="!error">
<div class="span4">
<!-- linediv-l and linediv-r give dividing lines that look
different in horizontal and vertical layouts, illustrating
media queries. -->
<div class="linediv-l">
<h3>{{result.current}}</h3> <p>Current</p>
</div>
</div>
<div class="span4">
<div class="linediv-c">
<h3>{{result.average}}</h3> <p>Average</p>
</div>
</div>
<div class="span4">
<div class="linediv-r">
<h3>{{result.days_left}}</h3> <p>Days Left</p>
</div>
</div>
</div>
<div ng-show="error">
<h3>{{result.error}}</h3>
</div>
</div>
</div>
I have a header area before my ui-view. I don't want to include my header in every template file. How can I use a directive or something to get a button on top of the page?
The button depends on the pages.
Here some examples:
My main index.html
<!DOCTYPE html>
<html ng-app="smarthome">
<head>
<script type="text/javascript" src="/lib/ionic/js/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/ionic/js/angular-ui/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<section id="content">
<div class="page-header row">
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
Why don't you link a controller to the header and use ng-show in the top div of the header?
Like this:
<body>
<section id="content" ng-controller="headerCtrl">
<div class="page-header row" ng-show="isVisible()>
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
I had a similar requirement. You could add the button function in ng-click by adding the function
angular.module('app', ['LocalStorageModule'])
.run(['$rootScope', function ($rootScope) {
$rootScope.yourFunction = function () {
console.log("clicked here");
}
}]);