Angular JS parent scope is not updating child scope

Question

Hi I have some nested menu where I am trying to change the color of a child scope from parent but its not working. Here is the simplified code.

.directive('botMenuClick', function() {
    return {
        link: function(scope,ele,attrs){
            ele.bind('click', function(){
                 if(ele.attr('homeBtn')==='true'){
                    scope.$parent.setDisplay = {'color': '#fff'} // this applies to all children but not the one which is set in else condition
                 }else{
                     scope.setDisplay = {'color': 'green'}
                 }
                 scope.$apply();
            }); 
        }
    }
})

So, once I get in to the else condition and that menu color is changed to green then no matter what it won't change to white even if I go in the above homeBtn condition.

are you trying to access parent scope from child scope or child scope from parent scope? — Prasad K - Google
– Prasad K - Google, Commented Sep 5, 2014 at 18:23
I am setting setDisplay style from its own scope then change it latter from parent. — alflashy
– alflashy, Commented Sep 6, 2014 at 15:13

bmceldowney · Accepted Answer · 2014-09-05 18:44:17Z

2

That's because that's how prototypal inheritance works. If a child object sets a property with the same name as a property on a prototype then the child is actually creating a new property in itself which hides the parent property. From this mdn article:

"Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a getter or a setter."

My assumption is that the UI element is binding to the child scope property, which doesn't exist until it is set by the else condition, so up until that point it's looking up the prototype chain for the value of setDisplay. As soon as the else condition fires setDisplay gets set on the child scope, hiding the prototype value for the rest of eternity.

edited Sep 5, 2014 at 18:44

answered Sep 5, 2014 at 18:35

bmceldowney

2,31514 silver badges19 bronze badges

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

4 Comments

alflashy Over a year ago

but setDisplay is already set in html in ng-style like this <div class='bottomSubMenuHolder' ng-show='showSubMenu' ng-style="setDisplay"> <div ng-repeat='bottomSubMenu in bottomMenu.subMenu' class='bottomSubMenu'>{{bottomSubMenu.subMenuLabel}}</div> </div>

bmceldowney Over a year ago

Binding to a scope value in HTML is not setting anything. Setting an HTML binding lets the $compile service know which JavaScript properties on the scope to bind to. All declaration and modification of properties happens in JavaScript.

bmceldowney Over a year ago

Please read this question to get more context: stackoverflow.com/questions/16972976/…

alflashy Over a year ago

I got the Plunker link. There are two menus the first one works but I want the menu 1 to close all menu. I tried the second approach so that I can detect the menu 1 and perform other task but one I modifying scope I can't change the it again from parent. here is the link plnkr.co/edit/vBnXZNIc8aEizpGxXhhK?p=preview

Collectives™ on Stack Overflow

Angular JS parent scope is not updating child scope

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related