Javascript 如何从组件访问$rootScope？

我对AngularJS/Ionic/Cordova编程非常陌生，我正在尝试使用全局变量处理组件的可见性，以便可以对其他组件进行隐藏或显示。调用

run

函数并将其分配给

$rootScope

时，我正在创建变量

app.run(function($rootScope, $ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Some Ionic/Cordova stuff...

        // My global variable.
        $rootScope.visible = true;
    });
})

我的组成部分是：

function MyComponentController($rootScope, $scope) {
    var self = this;
    self.visible = $rootScope.visible;
    alert(self.visible);
}

angular.module('myapp')
    .component('myComponent', {
        templateUrl: 'my-component.template.html',
        controller: MyComponentController
    });

以及模板：

<div ng-if="$ctrl.visible">
  <!-- ... -->
</div>

---

但是，警报消息始终显示“未定义”。我缺少什么？

将

self

更改为

$scope

怎么样：

function MyComponentController($rootScope, $scope) {
    $scope.visible = $rootScope.visible;
    alert($scope.visible);
}

---

$rootScope.visible

被指定为

self.visible=$rootScope.visible

时不受监视。当组件控制器实例化时，它是

未定义的

可能是

function MyComponentController($rootScope, $scope) {
    var self = this;

    $scope.$watch(function () { return $rootScope.visible }, function (val) { 
        self.visible = val;
    });
}

顺便说一下，它可能作为

$scope.$parent.visible

提供，并且可以在模板中绑定为

ng if=“$parent.visible”

，但这是强烈反对的反模式

可能有更好的方法：

• 顶级

  AppController

  和
  ，因此组件不必控制自己的可见性

• 使用范围事件进行广播，

  $rootScope.$broadcast（'visibility:myComponent'）

• 使用服务作为事件总线（这是RxJS可能有用的地方）

• 使用路由器控制视图的可见性，可能使用路由/状态解析器（这是最好的方法）

---

问题在于

$rootScope.visible==未定义
。不管它是分配给
$scope.visible
还是
self.visible
。首先，你不应该考虑使用
$rootScope
，创建一个服务并在需要的地方共享它的变量。谢谢你的建议，我会检查它们。