Create Custom HTML Elements with Directives
Description
The following code shows how to create Custom HTML Elements with Directives.
Example
<!--from ww w. j av a 2s . c o m-->
<!doctype html>
<html ng-app='MyApp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script>
var app = angular.module("MyApp", []);
app.directive("show", function() {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.show, function(value){
element.css('display', value ? '' : 'none');
});
}
};
});
</script>
</head>
<body ng-app="MyApp">
<label for="checkbox"><input id="checkbox" type="checkbox" ng-model="visible">Toggle me</label>
<div show="visible">
<p>Hello World</p>
</div>
</body>
</html>