CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
moustacheman
moustacheman

Reputation: 1464

Angularjs Directive - Isolated scope value is undefined

I am a newbie in angularjs. I am little confused about isolated scope in directives. I have the following code,

HTML

<!doctype html>
<html ng-app="myApp">
<body ng-controller="componentsController">
    <div class="scope-one" data-param="a">
        <div class="scope-two" data-param="c"></div>
    </div>
    <!---->
</body>
</html>

Script

angular.module('components', [])
    .controller('componentsController', function($scope){
        $scope.a = {
                "b": 1
            };
        $scope.c = { 
                "d": 2
            };
    });

    angular.module('myApp', ['components'])
        .directive('scopeOne', function() {
            return {
                restrict: 'C',
               scope: {
                    a: "=param"
                },
                link: function(scope, element, attrs) {
                    console.log('one', scope);
                }
            };
        })
        .directive('scopeTwo', function() {
            return {
                restrict: 'C',
                scope: {
                    c: "=param"
                },
                link: function(scope, element, attrs) {
                    console.log('two', scope);
                }
            };
        })

Demo http://jsfiddle.net/jPtb3/23/

Problem I have two directives scope-one and scope-two and I am using scope-two inside scope-one. For scope-one, the isolated scope is fine and proper whereas for scope-two the values is undefined. I am not getting the problem, am I doing something wrong? Both the isolated scope values are fine, when one directive is not in another.

Upvotes: 0

Views: 3272

Answers (1)

AlwaysALearner
AlwaysALearner

Reputation: 43947

Scenario 1: When scope-two is not inside scope-one both the directives are directly under the scope of the controller and everything works as expected.

Scenario 2: When scope-two is inside scope-one the former directive moves inside the scope of the latter and not directly under the scope of the controller.

In this situation you would need to use $parent to access the model c of the controller scope.

This works for me:

<div class="scope-one" data-param="a">
    <div class="scope-two" data-param="$parent.c"></div>
</div>

Upvotes: 3

Related Questions