angularjs difference between link and controller

angularjs difference between link and controller

Hello everyone, I am going to share the code sample for differentiate to link and controller.

Link : The link is a function and use to attached handlers and also use for DOM elements modification.

Controller : The controller is use to share the $scope data within the scope and also provide the ways of linking the DOM elements.

Table of Contents          
  1. HTML code sample for link vs. controller            
  2. AngularJs code sample for link vs. controller
  3. Full (HTML+ AngularJs) code sample for link vs. controller
  4. Live demo link  http://embed.plnkr.co/cbsRod/preview
HTML code sample for link vs. controller

<div ng-app="linkApp">
    <div ng-controller="linkCtrl">
        <link-directive></link-directive>
    </div>
</div>

AngularJs code sample for link vs. controller

var app = angular.module('linkApp', []);

//This is controller section.
app.controller('linkCtrl', ["$scope", function ($scope) {
    $scope.count = 'One ';
}]);

//This is directive section.
app.directive('linkDirective', function () {
    return {
        restrict: 'E',
        template: '<span>This is {{count}}!</span>',
        controller: function ($scope, $element) {
            $scope.count = $scope.count + ", Two";
        },
        link: function (scope, el, attr) {
            scope.count = scope.count + ", Three";
        }
    }
});

Full (HTML+ AngularJs) code sample for link vs. controller.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS directive controller vs. link</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script>
        var app = angular.module('linkApp', []);

        //This is controller section.
        app.controller('linkCtrl', ["$scope", function ($scope) {
            $scope.count = 'One ';
        }]);

        //This is directive section.
        app.directive('linkDirective', function () {
            return {
                restrict: 'E',
                template: '<span>This is {{count}}!</span>',
                controller: function ($scope, $element) {
                    $scope.count = $scope.count + ", Two";
                },
                link: function (scope, el, attr) {
                    scope.count = scope.count + ", Three";
                }
            }
        })
    </script>
</head>
<body ng-app="linkApp">
    <div ng-controller="linkCtrl">
        <link-directive></link-directive>
    </div>
</body>
</html>









For more detail you can go links



ANIL SINGH

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.