Angular Js Practice Day1
Custom Directives
Directive are of various types : Componenets - Containes its own HTML elements , Decorators - Enhances functionality of existing cutomers ,Templating - Which manupulate the DOM elements and have its own templating.A component oriented directivs return html in the form of template
Directive with different html template
----------------------------------------------------------------------------------------------------------------------
html
<div ng-controller="CustomDirectivesController2">
<h2> Customer Directive2 </h2>
<div>
<input type="text" ng-model="search">
<button ng-click="getTheEmployee()">Search</button>
</div>
<div employee-details ng-if="empId != undefined"></div>
</div>
employee-details.html (directive template)
<div>
<strong>employee id :</strong> {{ empId }} <br>
<strong>First Name :</strong> {{ firstName }} <br>
<strong>Last Name :</strong> {{ lastName }} <br>
<strong>Salary :</strong> {{ salary }} <br>
<strong>HireDate :</strong> {{ hireDate |date : 'medium'}}
</div>
controller
app.controller("CustomDirectivesController2",['$scope',function($scope){
Directive are of various types : Componenets - Containes its own HTML elements , Decorators - Enhances functionality of existing cutomers ,Templating - Which manupulate the DOM elements and have its own templating.A component oriented directivs return html in the form of template
Directive with different html template
----------------------------------------------------------------------------------------------------------------------
html
<div ng-controller="CustomDirectivesController2">
<h2> Customer Directive2 </h2>
<div>
<input type="text" ng-model="search">
<button ng-click="getTheEmployee()">Search</button>
</div>
<div employee-details ng-if="empId != undefined"></div>
</div>
employee-details.html (directive template)
<div>
<strong>employee id :</strong> {{ empId }} <br>
<strong>First Name :</strong> {{ firstName }} <br>
<strong>Last Name :</strong> {{ lastName }} <br>
<strong>Salary :</strong> {{ salary }} <br>
<strong>HireDate :</strong> {{ hireDate |date : 'medium'}}
</div>
controller
app.controller("CustomDirectivesController2",['$scope',function($scope){
$scope.getTheEmployee = function (){
for(var i in employee)
{
console.log( $scope.search)
console.log(employee[i].empId)
if (employee[i].empId == $scope.search)
{
$scope.empId= employee[i].empId,
$scope.firstName=employee[i].firstName,
$scope.lastName = employee[i].lastName,
$scope.salary=employee[i].salary,
$scope.hiredate=employee[i].hiredate
console.log($scope.empId+" , "+$scope.firstName+" , "+$scope.lastName+" , "+$scope.salary);
}
else
{
console.log("Not Found "+$scope.search);
}
}
}
}]);
Directive
app.directive('employeeDetails',function(){
return{
templateUrl : 'employee-details.html'
}
});
json data
var employee=[
{
empId : 1000,
firstName : "Jack",
lastName : "Reacher",
salary : 40000,
hiredate : "06/08/2013"
},
{
empId : 2000,
firstName : "Frank",
lastName : "Castle",
salary : 50000,
hiredate : "05/09/2014"
},
{
empId : 3000,
firstName : "Bruce",
LastName : "Wayne",
salary : 70000,
hiredate : "09/02/2015"
}
]
Directive withing the script tag inside same html file where it needs to be injected
html file
<body ng-app="myApp">
<script type="text/ng-template" id="my-info-msg-id">
<strong> {{ msg }}</strong>
<br>
<button ng-click="displayMessage()"> Directive1</button>
</script>
<div ng-controller="CustomeDirectivesController">
<div my-info-msg>
</body>
controller
app.controller("CustomeDirectivesController",[ '$scope',function($scope){
$scope.msg="Hello World from Directive- Template within same file";
$scope.msg2="Hello World from Directive - from separate files";
$scope.displayMessage = function(){
$scope.anotherMessage="I was clicked"
}
}]);
directive
app.directive("myInfoMsg",function(){
return{
templateUrl : "my-info-msg-id"
};
})
Comments
Post a Comment