Richtlinie zum Ausblenden von Elementen des Gastbenutzers

Question

Ich möchte eine Direktive erstellen, die bestimmte Elemente für Gastbenutzer verbergen kann. Zur Zeit habe ich dies:

angular.module('someMod') 
    .directive('premiumUser', premiumUser) 
    .controller('PremiumUserCtrl', PremiumUserCtrl); 

function premiumUser() { 
    return { 
     restrict : 'A', 
     link  : premiumUserLink, 
     controller : 'PremiumUserCtrl', 
    }; 
} 

function premiumUserLink (scope, element) { 
    if (!scope.checkLoggedIn()) 
     element.hide(); 
} 

function PremiumUserCtrl ($scope, sessionManager) { 
    $scope.checkLoggedIn = function() { 
     return sessionManager.isUserLoggedIn(); 
    }; 
} 

Also, wenn ich diese Richtlinie auf ein Element wie folgt aus:

<ANY premium-user></ANY> 

es funktioniert, aber es verhindert nicht die Steuerung gezielt Richtlinie onInit Code initialisieren und ausführen .

Wie kann ich diese Anweisung ändern, um eine Controller-Initialisierung zu verhindern?

Vielen Dank im Voraus!

Answer 1

Wenn ich richtig verstanden habe, sollte ein ng-if funktionieren. Ich denke, wenn Sie nur eine Bereichsvariable verwenden, um ihre Verfügbarkeit zu überprüfen. Platzieren Sie dann den scope.var auf dem Direktiven-Tag in der Vorlage.

<any premium-user ng-if="iSGuest"></any> 

//ctrl 

$scope.isGuest = function() { 
    //processing for guest 
}; 

Answer 2

element.hide() setzt nur die CSS-Eigenschaft display: none, so dass alle Richtlinien und deren Controller werden noch initialisiert werden.

Ich würde implementieren eine benutzerdefinierte ng-if -Richtlinie, etwa wie folgt:

function premiumUser ($animate) { 
    return { 
     restrict: 'A', 
     terminal: true, 
     priority: 600, 
     transclude: 'element', 
     link: function(scope, element, attrs, ctrl, transclude) { 
      if (scope.checkLoggedIn()) { 
       var childScope; 

       if (!childScope) { 
       childScope = scope.$new(); 
       transclude(childScope, function(clone) { 
        $animate.enter(clone, element.parent(), element); 
       }); 
       } 
      } 
     }, 
     controller: 'PremiumUserCtrl' 
    }; 
} 

Schauen Sie sich die ngIf docs und Quellcode, wenn Sie daran interessiert sind, mehr zu wissen, wie es funktioniert.