python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions