AngularJS dynamisch Klasse auf <html> Tag basierend auf Route

Ich bin nicht sicher, der beste Weg, dies zu nähern.AngularJS dynamisch Klasse auf <html> Tag basierend auf Route

Ich möchte eine Klasse auf meiner Route /login dynamisch festlegen, so dass meine Anmeldeseite ein großes Hintergrundbild haben kann.

Was ist der beste Weg, um dies zu nähern?

Hier ist mein aktueller Code:

<!DOCTYPE html> 
<html class="SOME_DYNAMIC_CLASS_HERE_BASED_ON_ROUTE"> 
... 
</html> 
<body ng-app="myApp"> 
    <div ng-view=""></div> 
</body> 

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) { 
    $routeProvider 
     .when('/login', { 
     templateUrl: 'login.html', 
     controller: 'LoginCtrl' 
     }) 
     .when('/', { 
     templateUrl: 'dashboard.html', 
     controller: 'DashboardCtrl' 
     })

Quelle

2014-11-07 Catfish

eine Richtlinie verwenden! – wbeange

@wbeange das Problem hier ist der Umfang - können Sie dem OP eine klarere Antwort geben, wie eine Direktive auf dem HTML-Element verwendet werden könnte? Ich nehme an, wenn ng-app auf dem html-Element ist, könnte eine Direktive dort funktionieren, aber ich habe nie versucht, einen außerhalb des Controller-Bereichs zu verwenden. –

Sie müssen Ihre ng-app im <html> Element angebracht haben, um irgendeine Art von Verbindung zwischen Winkel und der Ansicht zu haben. Da Sie möchten, dass etwas auf der aktuellen Route Ihrer Anwendung geändert wird, warum sollten Sie diese Routen nicht als Referenz für Ihre Konfiguration verwenden, z. die $routeProvider Konfiguration. Fügen Sie alle Ihre Konfiguration, einschließlich der Konfiguration von Klassen, zu Stilen oder anderen Konfigurationen innerhalb des Routenobjekts hinzu. Anschließend können Sie eine Richtlinie erstellen, die über $routeChangeSuccess zu Routenänderungen zuhören und dann die aktuelle Route und andere Eigenschaften erhalten, die als zweiten Parameter des $routeChangeSuccess Hörers definiert $route Objekt verwenden, wenn Sie diese Eigenschaften haben, können Sie tun, was auch immer du willst damit e.g. eine Klasse an dieses direktive Element anhängen.

DEMO

Javascript

Konfiguration

.config(function ($routeProvider) { 
    $routeProvider 
     .when('/dashboard', { 
     templateUrl: 'dashboard.html', 
     'class': 'bg-dashboard' 
     }) 
     .when('/login', { 
     templateUrl: 'login.html', 
     'class': 'bg-login' 
     }) 
     .otherwise({redirectTo: '/login'}); 
    });

Richtlinie

.directive('classRoute', function($rootScope, $route) { 

    return function(scope, elem, attr) { 
     var previous = ''; 
     $rootScope.$on('$routeChangeSuccess', function(event, currentRoute) { 
     var route = currentRoute.$$route; 
     if(route) { 

      var cls = route['class']; 

      if(previous) { 
      attr.$removeClass(previous); 
      } 

      if(cls) { 
      previous = cls; 
      attr.$addClass(cls); 
      } 
     } 
     }); 
    }; 

    });

HTML

<html ng-app="myApp" class-route>...</html>

Quelle

2014-11-07 03:19:14 ryeballar

Das ist ein besserer Ansatz, wie man die Klasse einstellt –

eine Richtlinie zu verwenden ist ein Weg zu gehen.

.directive("routeClass", function($location, $parse) { 
    var mapping = {}; 
    return { 
     restrict: "A", 
     scope: {}, 
     link: function(scope, element, attrs) { 
     mapping = $parse(attrs["routeClass"])(scope); 
     // do something with mapping and $location or $routeParams 
     } 
    } 
    }); 

<any route-class="{'/': 'default', '/Book': 'book'}" />

andere - ist es über $rootScope einzustellen.

Quelle

2014-11-07 02:14:19

Aber kann ich das außerhalb meiner ng-app und ng-controller verwenden? Ich denke nicht, also würde ich einen übergeordneten Controller erstellen? Oder was ist der beste Weg, damit umzugehen? – Catfish

Sie müssen es in 'ng-app' verwenden, aber nicht unbedingt in' ng-controller' –

Ich weiß, das ein alter Thread, aber ich kam über sie für einige Hinweise suchen. Ich habe mich für die folgende Methode entschieden, die sich "angularer" anfühlt. Beachten Sie, es ist eine controllerAs -basierte Direktive:

ngModule.directive('routeClass', routeClass); 

function routeClass($state, $log) { 

    function controllerFn($scope) { 

     var routeClass = this; 

     $scope.$on('$stateChangeSuccess', function(){ 
      // I have a different class name assignment as the 
      // setup of my states is relatively complex, 
      // but this should demonstrate the idea 
      routeClass.current = 'page-' + $state.current.name; 
     }); 
    } 

    return { 
     controller: controllerFn, 
     controllerAs: 'routeClass', 
     restrict: 'A' 
    }; 
}

Und es wird wie folgt verwendet in index.html:

<body ng-app="app" route-class ng-class="{{routeClass.current}}">

Quelle

2016-01-19 13:09:40 iamdash

AngularJS dynamisch Klasse auf <html> Tag basierend auf Route

Antwort

Verwandte Themen