The largest Interview Solution Library on the web


java tutorials/
« Previous | 1 | 2 | 3 | Next »
Angular JS Custom Directives

AngularJS Custom Directives Application


<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Custom Directives Application</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
<student name = "aarif"></student><br/>
<student name = "rahul"></student>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
directive.scope = {
student : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
mainApp.controller('StudentController', function($scope) {
$scope.aarif = {};
$scope.aarif.name = "aarif m";
$scope.aarif.rollno = 1;
$scope.rahul = {};
$scope.rahul.name = "rahul parsar";
$scope.rahul.rollno = 2;
});
</script>
</body>
</html>
« Previous | 1 | 2 | 3 | Next »
copyright © 2014 - all rights riserved by javatechnologycenter.com