Issue with two way binding in AngularJS Component

Question

I'm creating an AngularJS component

var notificationComponent = {
        templateUrl: "notification.html",
        controller: ['$rootScope', notificationController],
        bindings: {
            visible: "="
        }
    };

I want to use in HTML like below:

<notification visible="$rootScope.showNotification"></notification>

Basically I want to control 'visible' property from any other component as true or false.

I tried achieving this by maintaining a variable in $rootScope named showNotification. But if I modify its value from any other component like:

$rootScope.showNotification = true;

Its not changing the 'visible' property value.

As per my understanding following code does a two way binding in AngularJS component.

bindings: {
            visible: "="
        }

Can someone tell me where I am going wrong?

But keep in mind - using $root and $rootScope is not recommended way, this may cause unpredictable behavior, you should better plan your app architecture — Majesty
– Majesty, Commented Mar 15, 2018 at 8:50
@LuninRoman If i don't use $rootScope to track the flag showNotification what should be the better approach to achieve it. — Manish
– Manish, Commented Mar 15, 2018 at 11:04
You can design a service, for example NotificationService with methods show and hide, or at least using Angularjs $broadcast service to emit and watch events. — Majesty
– Majesty, Commented Mar 15, 2018 at 11:49

lin · Accepted Answer · 2018-03-15 08:55:07Z

3

It should $root in view to access $rootScope:

<notification visible="$root.showNotification"></notification>

> demo fiddle

edited Mar 15, 2018 at 8:55

answered Mar 15, 2018 at 8:44

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

Issue with two way binding in AngularJS Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related