Index.html
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body>
<div ng-app="myapp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="Student.firstname"><br>
Last Name: <input type="text" ng-model="Student.lastname"><br>
<br>
Full Name: {{Student.FullName()}}
<student firstname="Donald" lastname="Trump">Future President</student>
<student firstname="Hillary" lastname="Clinton">Future President</student>
</div>
</body>
</html>
script.js
angular
.module('myapp', [])
.controller('myCtrl', function($scope) {
$scope.Student= {
firstname : "Anurag",
lastname : "Nayak",
FullName:function(){
return $scope.Student.firstname + " " + $scope.Student.lastname;
}
}
}).directive('student',function(){
return {
restrict:'E',
scope:true,
link:function(scope,element,attribute){
scope.fullname = scope.Student.firstname + " " + scope.Student.lastname;
scope.FullAttributeName = attribute.firstname + " " + attribute.lastname;
},
replace:true,
transclude:true,
template:"<h1>Hello {{fullname}} Meet {{FullAttributeName}} <ng-transclude></h1>"
}
});
OutPut
If isolated scope removed
.directive('student',function(){
return {
restrict:'E',
link:function(scope,element,attribute){
scope.fullname = scope.Student.firstname + " " + scope.Student.lastname;
scope.FullAttributeName = attribute.firstname + " " + attribute.lastname;
},
replace:true,
transclude:true,
template:"<h1>Hello {{fullname}} Meet {{FullAttributeName}} <ng-transclude></h1>"
}
});
If transclude removed
.directive('student',function(){
return {
restrict:'E',
link:function(scope,element,attribute){
scope.fullname = scope.Student.firstname + " " + scope.Student.lastname;
scope.FullAttributeName = attribute.firstname + " " + attribute.lastname;
},
replace:true,
template:"<h1>Hello {{fullname}} Meet {{FullAttributeName}} <ng-transclude></h1>"
}
});
A question that was asked by me on StackOverFlow.
http://stackoverflow.com/questions/37078357/on-blur-in-angular-directive-not-working-properly/37078959?noredirect=1#comment61704369_37078959
No comments:
Post a Comment