如何从组件访问 $rootScope？答案

【问题标题】：How do I reach $rootScope from a component?如何从组件访问 $rootScope？
【发布时间】：2017-01-24 02:18:26
【问题描述】：

我对 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>

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

【问题讨论】：

第一个你不应该考虑使用$rootScope的地方，创建一个服务并在任何你需要的地方共享它的变量..

标签： javascript angularjs cordova ionic-framework

【解决方案1】：

$rootScope.visible 被分配为 self.visible = $rootScope.visible 时不会被监视。并且在组件控制器被实例化的那一刻是undefined。

可以

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和<my-component ng-if="visible">，因此组件不必控制自己的可见性
使用范围事件广播它，$rootScope.$broadcast('visibility:myComponent')
使用服务作为事件总线（这就是 RxJS 可能有用的地方）
使用路由器控制视图的可见性，可能使用路由/状态解析器（这是最好的方法）

【讨论】：

感谢您的建议，我会检查一下。

【解决方案2】：

像这样将self 更改为$scope 怎么样：

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

【讨论】：

问题是$rootScope.visible == undefined。分配给$scope.visible或self.visible都没有关系。