Directive is a unique and powerful feature available only in Angular. Directive let you invent new html syntax, specific to your application.
Directive can add:
1. Behaviors
2. Data binding to scope
3. Replace or to extend the Html element
Directive can add:
1. Behaviors
2. Data binding to scope
3. Replace or to extend the Html element
<html>
<head>
<title> Creating Custom directives in AngularJS </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<h1> Creating Custom directives using AngularJS </h1>
<div ng-controller="Controller">
<div my-customer> /* my-customer is a custom directive */ </div>
</div>
<script>
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
//Custom Directive
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
</script>
</body>
</html>
Comments
Post a Comment