Wednesday 27 September 2017
Tuesday 26 September 2017
Custom Directive with and Without Transclude
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="customdir.js"></script>
<meta charset="utf-8" />
</head>
<body ng-controller="myController">
<div ng-repeat="emp in
employees">
<emp-details fname={{emp}}>
Employees Name :
</emp-details>
</div>
</body>
</html>
With Transclude
'use strict'
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function ($scope) {
$scope.employees = ['Ranjeet','Abhishek','Munna','Vishesh','Amit'];
}])
.directive('empDetails', function () {
return {
restrict: 'E',
template: '<span ng-transclude></span>',
transclude: 'true',
link: function (scope,element,attr) {
element.append("<strong>" + attr.fname + "</strong>")
}
}
})
Without Transclude
'use strict'
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function ($scope) {
$scope.employees = ['Ranjeet','Abhishek','Munna','Vishesh','Amit'];
}])
.directive('empDetails', function () {
return {
restrict: 'E',
template: '<span ng-transclude></span>',
//transclude:
'true',
link: function (scope,element,attr) {
element.append("<strong>" + attr.fname + "</strong>")
}
}
})
Subscribe to:
Posts (Atom)