Fatal编程技术网
  • angularjs/
  • Angularjs 将$rootScope持久化到指令中

Angularjs 将$rootScope持久化到指令中

angularjs

Angularjs 将$rootScope持久化到指令中,angularjs,Angularjs,我正在创建一个打开/关闭的纵断面图，用户可以在其中单击任意位置来关闭此纵断面图 现在，我为ngIf控制创建了一个$rootscope变量 // this is a toggle functionality $rootScope.profileOpened = false; $rootScope.userProfile = function () { if ($rootScope.profileOpened) { $rootScope.profileOpened = fal

我正在创建一个打开/关闭的纵断面图，用户可以在其中单击任意位置来关闭此纵断面图

现在，我为
ngIf
控制创建了一个
$rootscope
变量

// 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
引用

我缺少什么？

该值将更改，但由于事件不在angular范围内，您需要告诉angular使用
$apply（）
或
$timeout（）
运行摘要，否则您将看不到视图中反映的更改

尝试：

如果使用
ng，单击
angular将自动在内部运行摘要


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