var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('myTest', ['$compile', function($compile) {
return {
link: function($scope, $element, $attrs) {
$element.removeAttr('my-test');
$compile($element)($scope);
$scope.$watch('count', function(value) {
console.log('count changed: ', value);
});
$scope.$on('$destroy', function() {
console.log('my-test destroyed');
});
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="count = 0">
<p ng-bind="count"></p>
<button ng-click="count = count + 1">+</button>
<button ng-click="count = count - 1">-</button>
<button ng-click="count = 0">0</button>
<p ng-if="count > 0" my-test ng-bind="'my-test shown, count: ' + count"></p>
</body>
</html>
/* Put your css in here */