var app = angular.module('plunker', []);
app.directive('activity',function() {
return {
restrict: 'A',
scope: {
activity: '='
},
link: function(scope, element, attrs) {
scope.$watch('activity', function(val) {
console.log(val);
})
}
};
});
app.controller('MainCtrl', function($scope){
$scope.isBusy = false;
$scope.toggle = function() {
$scope.isBusy = !$scope.isBusy;
}
});
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<p activity='isBusy'></p>
<button ng-click='toggle()'>Toggle busy</button>
<p>isBusy: {{ isBusy }}</p>
</div>
</body>
</html>
/* Put your css in here */