Question

我正在创建一个打开/关闭的个人资料视图，用户可以点击任意一个共享来关闭此个人资料。

目前，我为$rootscope控件创建了ngIf变量。

// this is a toggle functionality
$rootScope.profileOpened = false;
$rootScope.userProfile = function () {
    if ($rootScope.profileOpened) {
        $rootScope.profileOpened = false;
    } else {
        $rootScope.profileOpened = true;
    }
}

然后我在正文中有一个指令来绑定点击以将$rootScope.profileOpened设置为false。

this.app.directive("globalEvents", function ($rootScope) {
    return {
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if ($rootScope.profileOpened) {
                    $rootScope.profileOpened = false;
                }
            });
        }
    }
});

html指令

<body global-events>

指令中的$rootScope注入工作正常，但是当操作指令内的变量时，我的原始$rootScope.profileOpened不会改变，听起来好像我丢失了$rootScope引用。

我失踪了什么？

Answer 1

该值会发生变化，但由于事件超出了角度，您需要告诉angular使用$apply()或$timeout()运行摘要，否则您将无法看到视图中反映的更改

尝试：

 element.bind('click', function (e) {
      if ($rootScope.profileOpened) {
         $rootScope.profileOpened = false;
         scope.$apply();
       }
  });

如果使用ng-click angular会自动在内部运行摘要。

将$ rootScope持久化为指令

1 个答案: