Wie erreiche ich $ rootScope von einer Komponente?

Question

Ich bin sehr neu in AngularJS/Ionic/Cordova Programmierung und versuche, die Sichtbarkeit einer Komponente mit einer globalen Variablen zu behandeln, so dass es von anderen Komponenten versteckt oder gezeigt werden kann. Ich erstelle die Variable, wenn ich die Funktion run aufruft und sie $rootScope zuweise.

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

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

Meine Komponente ist:

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 
    }); 

Und die Vorlage:

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

jedoch die Warnmeldung immer "undefiniert" zeigt. Was vermisse ich?

Answer 1

$rootScope.visible nicht beobachtet wird, wenn sie als self.visible = $rootScope.visible zugeordnet ist. Und es ist undefined in dem Moment, wenn der Komponentencontroller instanziiert wird.

Es kann

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

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

Durch die Art und Weise sein, ist es wahrscheinlich, wie $scope.$parent.visible verfügbar und können als ng-if="$parent.visible" in Vorlage gebunden werden, aber dies ist die Antipattern wird dringend abgeraten.

Es kann bessere Ansätze sein:

• Top-Level-AppController und <my-component ng-if="visible">, so dass die Komponente nicht auf seine eigene hat zu steuern Sichtbarkeit

• es mit Rahmen Veranstaltungen Rundfunk, $rootScope.$broadcast('visibility:myComponent')

• Verwendung eines Dienstes als Ereignisbus (hier kann RxJS hilfreich sein)

• einen Router mit der Sichtbarkeit der Ansichten zu steuern, möglicherweise mit Route/Zustand Resolver (dies ist der beste Weg)

Answer 2

Wie wäre Änderung self-$scope wie folgt aus:

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