Skip to content

Instantly share code, notes, and snippets.

@drKnoxy

drKnoxy/index.html

Created June 11, 2015 14:37
Show Gist options
  • Save drKnoxy/1288e188d52e1fb85a81 to your computer and use it in GitHub Desktop.
Save drKnoxy/1288e188d52e1fb85a81 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS: Data binding between service and controller
Raw
index.html
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<style>
body {
padding: 20px 0;
}
</style>
</head>
<body ng-app="ServiceNotification" class="container">
<div ng-controller="Test1" class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Test 1: Works !</div>
</div>
<div class="panel-body">
<p>dot in ctrl, dot in factory</p>
Last Updated: {{model.lastUpdated}}
<br> Calls: {{model.calls}}
</div>
</div>
<div ng-controller="Test2" class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Test 2: Broken</div>
</div>
<div class="panel-body">
<p>dot in ctrl, nodot in factory</p>
Last Updated: {{model.lastUpdated}}
<br> Calls: {{model.calls}}
</div>
</div>
<div ng-controller="Test3" class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Test 3: Broken</div>
</div>
<div class="panel-body">
<p>nodot in ctrl, dot in factory</p>
Last Updated: {{lastUpdated}}
<br /> Calls: {{calls}}
</div>
</div>
<div ng-controller="Test4" class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Test 4: Broken</div>
</div>
<div class="panel-body">
<p>nodot in ctrl, dot in factory</p>
Last Updated: {{lastUpdated}}
<br> Calls: {{calls}}
</div>
</div>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function Test1($scope, Timer) {
$scope.model = Timer.data;
};
function Test2($scope, Timer) {
$scope.model = {
lastUpdated: Timer.lastUpdated,
calls: Timer.calls
}
}
function Test3($scope, Timer) {
$scope.lastUpdated = Timer.data.lastUpdated;
$scope.calls = Timer.data.calls;
}
function Test4($scope, Timer) {
$scope.lastUpdated = Timer.lastUpdated;
$scope.calls = Timer.calls;
}
app.factory("Timer", function($timeout) {
var data = {
lastUpdated: new Date(),
calls: 0
};
var lastUpdated = new Date();
var calls = 0;
var updateTimer = function() {
data.lastUpdated = new Date();
data.calls += 1;
lastUpdated = new Date();
calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 2000);
};
updateTimer();
return {
data: data,
lastUpdated: lastUpdated,
calls: calls
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment