AngularJS 组件中的双向绑定问题

Question

我正在创建一个 AngularJS 组件

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

我想在 HTML 中使用，如下所示：

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

基本上我想从任何其他组件控制'visible'属性是真还是假。

我尝试通过在 $rootScope 中维护一个名为 showNotification 的变量来实现这一点。但是如果我从任何其他组件修改它的值，例如：

$rootScope.showNotification = true;

它不会更改“visible”属性值。

根据我的理解，以下代码在 AngularJS 组件中进行了双向绑定。

bindings: {
            visible: "="
        }

谁能告诉我哪里错了？

Answer 1

它应该 $root 以便访问 $rootScope:

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

> demo fiddle

AngularJS 组件中的双向绑定问题

Issue with two way binding in AngularJS Component

angularjs

angularjs-components

two-way-binding