Skip to content

Instantly share code, notes, and snippets.

@jeffling

jeffling/index.html

Created September 7, 2014 23:51
Show Gist options
  • Save jeffling/75714a09024b649f8610 to your computer and use it in GitHub Desktop.
Save jeffling/75714a09024b649f8610 to your computer and use it in GitHub Desktop.
Download ZIP
Experiment for computed properties in a Service // source http://jsbin.com/tayowe/2
Raw
index.html
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta name="description" content="Experiment for service computed values" />
<title>Controller Messaging Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="TestCtrl">
X: <input type="number" data-ng-model="TestService.x" /><br/>
Y: <input type="number" data-ng-model="TestService.y" /><br/>
Answer: {{TestService.answer}}
</div>
<script id="jsbin-javascript">
var TestCtrl, TestService, app;
app = angular.module('demo', []);
TestService = (function() {
TestService.prototype.x = 1;
TestService.prototype.y = 2;
TestService.prototype.answer = 3;
function TestService($rootScope) {
$rootScope.$watch(((function(_this) {
return function() {
return _this.x + _this.y;
};
})(this)), (function(_this) {
return function() {
console.log("Answer Changed", _this.x + _this.y);
return _this.answer = _this.x + _this.y;
};
})(this));
}
return TestService;
})();
app.service('TestService', TestService);
TestCtrl = (function() {
function TestCtrl($scope, TestService) {
$scope.TestService = TestService;
}
return TestCtrl;
})();
app.controller('TestCtrl', TestCtrl);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="demo">
<head>
<meta name="description" content="Experiment for service computed values" />
<title>Controller Messaging Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
</head>
<body>
<div data-ng-controller="TestCtrl">
X: <input type="number" data-ng-model="TestService.x" /><br/>
Y: <input type="number" data-ng-model="TestService.y" /><br/>
Answer: {{TestService.answer}}
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">app = angular.module 'demo', []
class TestService
x: 1
y: 2
answer: 3
constructor: ($rootScope) ->
$rootScope.$watch (=> @x + @y), =>
console.log "Answer Changed", @x + @y
@answer = @x + @y
app.service 'TestService', TestService
class TestCtrl
constructor: ($scope, TestService) ->
$scope.TestService = TestService
app.controller 'TestCtrl', TestCtrl
</script></body>
</html>
Raw
jsbin.tayowe.js
var TestCtrl, TestService, app;
app = angular.module('demo', []);
TestService = (function() {
TestService.prototype.x = 1;
TestService.prototype.y = 2;
TestService.prototype.answer = 3;
function TestService($rootScope) {
$rootScope.$watch(((function(_this) {
return function() {
return _this.x + _this.y;
};
})(this)), (function(_this) {
return function() {
console.log("Answer Changed", _this.x + _this.y);
return _this.answer = _this.x + _this.y;
};
})(this));
}
return TestService;
})();
app.service('TestService', TestService);
TestCtrl = (function() {
function TestCtrl($scope, TestService) {
$scope.TestService = TestService;
}
return TestCtrl;
})();
app.controller('TestCtrl', TestCtrl);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment