Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Understanding scope in Custom Directive

    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 105
    Comment on it

    There are three types of scopes used in a Custom Directive:-

      1. Shared scope 2. Inherited scope 3. Isolated scope

    1. Shared scope:-

    Directives share the scope within that controller, in a shared scope. Since a new scope is not created by the directive, so there is no inheritance here. Therefore we should not use this when directive is intended to use as a reusable component. It is also the default scope.

    Lets see an example:-

    App.controller(EgController', ['$scope', function ($scope) {
        $scope.student = {
            name: hello,
            age: 32,
            subject: [
                "maths,
                computers
            ]
        }
     
        $scope.setGrade = function (student) {
            student.grade = "A+"
        }
     
    }]);
    

    lets make a custom directive

    App.directive(egDirective', function () {
        return {
            template: "
    {{student.name}} is {{student.age}} years old !!
    ",
            replace: true,
            restrict: 'E',
            controller: function ($scope) {
                console.log($scope);
            }
        }
    });
    

    In this code snippet any changes we do to the properties in the directive would be reflected to the controller and vice-versa.

    The problem with the shared scope is as mentioned above we are not able to pass data explicitly to the directive.

    2.Inherited scope:

    The directive inherits the scope of the controller,in the inherited scope.We just have to set true to the value of the scope property. After that Angularjs creates a new scope object and this object is prototypically inherited from its parent scope

    Therefore,any changes made to this scope will not get reflected back to the parent scope. However any changes made in the EgController ( the parent scope) will get reflected in the directive scope.

    3. Isolated scope :

    In this scope, both directive and controller have their own scope. And data can be passed to the directive as:

    1. a string using @ string literal
    2. an object using = string literal
    3. a function

    Here is an example:

    App.directive(Eg, function () {
        return {
            restrict: 'E',
            scope: {
                name: '@',
            },
            template: '
    {{name}} '
        };
    });
    

    as an object

    App.directive(Eg, function () {
        return {
            restrict: 'E',
            scope: {
                data: '='
            },
            template: '
    {{data.name}} 
    '
        };
    });
    

    as a function

    App.directive(Eg, function () {
        return {
            restrict: 'E',
            scope: {
                data: '&',         
            },
            template: '
    {{data.name}}
    '
        };
    });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: