Created
June 11, 2015 14:37
-
-
Save drKnoxy/1288e188d52e1fb85a81 to your computer and use it in GitHub Desktop.
AngularJS: Data binding between service and controller
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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="[email protected]" 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