Accessing parent scope variable inside nested directive

Question

I have a directive declared inside another directive, which should use a single variable from parent scope. This is what the structure looks like:

MAIN CONTROLLER:

angular.module('app')
    .controller('MainCtrl', function ($scope, Settings){
$scope.userName = "";
$scope.init = function(){
 Settings.getUser()
                .then(function (res) {
                    $scope.userName = res.data.userName;
                    console.dir(res);
                }).catch(function (err) {
                    //showError(err.data)
                });
};
}

main.html

<div id="wrapper">

        <!-- Navigation -->

        <header></header>
        <!-- /.navbar-top-links -->


        <!-- /.navbar-static-side -->

            <div id="page-wrapper" style="min-height: 561px;">

                <div ui-view></div>

            </div>
            <!-- /#page-wrapper -->
    </div>

header.html

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<header-notification user-name="{{userName}}"></header-notification>
</nav>

header-notification.js

angular.module('app')
    .directive('headerNotification', function (Settings, $ngBootbox) {
        return {
            templateUrl: 'scripts/directives/header/header-notification/header-notification.html',
            restrict: 'E',
            scope: {
                'userName': '='
            },
            controller: ['$scope', function ($scope) {
                console.log($scope.userName);
            }],
            link: function (scope, element, attrs) {
                console.log(scope.userName);
            }
        }
    });

I am not able to access the value, I have also tried scope.$watch but still getting undefined in value..

greengrassbluesky · Accepted Answer · 2015-11-11 06:08:40Z

1

There are 3 changes you will need to make

Angular JS is not very good with camelcase. For some reason it inconsistently does not recognize/bind them. So, I would use "username"
remove the brackets when passing the variable. So, instead of {{username}} use just username
the variable name (userName - please change this to "username" as well) you have used in directive does not match what you have in the header.html (user-Name)

Hope this solves the problem.

answered Nov 11, 2015 at 6:08

greengrassbluesky

3731 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing parent scope variable inside nested directive

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related