controller vs link directive

Controller vs. Link Directive

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" />
    <title>Difference betweencontroller vs link. </title>
    <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>




ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.