Creating a directive named "hello"
A custom directive simply replaces the element for which it is activated.
here 'Element' and 'Attribute' is replaced by hello world
<!DOCTYPE html>
<html ng-app="app" >
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
<hello>Element</hello> - <u>Elemet</u>
<div data-hello>Attribute </div> - <u>Attribute</u>
</div>
<script>
var app=angular.module('app',[]);
return{
restrict:'ECMA',
replace:true,
template:'<span><br> Hello {{name}}</span>'
}
}]);
app.controller('MainController',function($scope)
{
$scope.name='World'
})
</script>
</body>
</html>
A custom directive simply replaces the element for which it is activated.
here 'Element' and 'Attribute' is replaced by hello world
<!DOCTYPE html>
<html ng-app="app" >
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
<hello>Element</hello> - <u>Elemet</u>
<div data-hello>Attribute </div> - <u>Attribute</u>
</div>
<script>
var app=angular.module('app',[]);
//Create a directive, first parameter is the html element to be attached.
app.directive('hello',[function(){return{
restrict:'ECMA',
replace:true,
template:'<span><br> Hello {{name}}</span>'
}
}]);
app.controller('MainController',function($scope)
{
$scope.name='World'
})
</script>
</body>
</html>
No comments:
Post a Comment