controller vs. link directive
The output demo link : http://embed.plnkr.co/EPEhfb/preview
AngularJs code :
var myApp =
angular.module('CtrlLinkApp',
[]);
myApp.controller('CtrlLinkCtrl', function ($scope) {
$scope.name = 'Anil, ';
});
myApp.directive('controllerVsLink', function () {
return {
restrict: 'E',
template: '<p>Hello
controller vs. link :
{{name}}!</p>',
controller: function ($scope, $element)
{
$scope.name = $scope.name +
"Sunil, ";
},
link: function (scope, el, attr) {
scope.name = scope.name + "Sushil
";
}
}
});
HTML code sample :
<div ng-app="CtrlLinkApp" ng-controller="CtrlLinkCtrl">
<controller-vs-link></controller-vs-link>
</div>
The Live demo code (HTML + AngularJs) code as
given below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script>
var myApp =
angular.module('CtrlLinkApp',
[]);
myApp.controller('CtrlLinkCtrl', function ($scope) {
$scope.name = 'Anil, ';
});
myApp.directive('controllerVsLink', function () {
return {
restrict: 'E',
template: '<p>Hello
controller vs. link :
{{name}}!</p>',
controller: function ($scope, $element)
{
$scope.name = $scope.name +
"Sunil, ";
},
link: function (scope, el, attr) {
scope.name = scope.name + "Sushil
";
}
}
});
</script>
</head>
<body ng-app="CtrlLinkApp" ng-controller="CtrlLinkCtrl">
<h1>
Difference between controller vs. link
</h1>
<controller-vs-link></controller-vs-link>
</body>
</html>
The output link : http://embed.plnkr.co/EPEhfb/preview
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
