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

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 - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book