Question

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

但是，警告信息始终显示＆＃34; undefined＆＃34;。我错过了什么？

Answer 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的帮助）
使用路由器控制视图的可见性，可能使用路由/状态解析器（这是最佳方式）

Answer 2

如何将self更改为$scope，如下所示：

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

如何从组件中获取$ rootScope？

2 个答案: