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