<!doctype html>
<html ng-app ="AngularExample">
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
<script src="angularobserve.js"></script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
A word: <input type="text" name="input" ng-model="watchtext" />
<br/>
Word changed {{counter}} times.
<br/>
Last value of counter was {{lastvalue}}
<br/>
Current value of counter is {{currentvalue}}
<br/>
<button ng-click="initCounter()" >
Counter = 0
</button>
</form>
<div id="bar" sample-directive time-interval=1000 datajson="sample.json">
scope.firstvalue is {{firstvalue}}
<br/>
scope.secondvalue is {{secondvalue}}
<br/>
</div>
</body>
</html>
function Ctrl($scope) {
var scope = $scope;
scope.watchtext = 'First Value';
scope.counter = 0;
scope.lastvalue = '';
scope.currentvalue = '';
$scope.initCounter = function() {
scope.counter = 0;
}
scope.$watch('watchtext', function(newValue, oldValue) {
scope.counter = scope.counter + 1;
scope.lastvalue = oldValue;
scope.currentvalue = newValue;
});
}
/* Styles go here */
angular.module('AngularExample', [])
.directive('sampleDirective', function ($timeout) {
return {
restrict: 'A',
scope: {
timeInterval: '@',
datajson: '@'
},
link: function (scope, elem, attrs) {
console.log(scope.timeInterval);
attrs.$observe('timeInterval', function(value) {
console.log('timeInterval has changed value to ' + value);
scope.firstvalue = value;
});
attrs.$observe('datajson', function(value) {
console.log('datajson has changed value to ' + value);
scope.secondvalue = value;
});
console.log(scope.firstvalue);
var t = $timeout( function() {
scope.firstvalue = 'new--' + ' and old--1' ;
scope.secondvalue = 'new--' + ' and old--2' ;
}, 2000);
}
}
});