AngularJS dynamicznie ustawia klasę na tagu <html> na podstawie trasy

Nie jestem pewien, jak najlepiej to podejść.AngularJS dynamicznie ustawia klasę na tagu <html> na podstawie trasy

Chcę dynamicznie ustawić klasę na mojej trasie /login, aby moja strona logowania mogła mieć duży obraz tła.

Jaki jest najlepszy sposób podejścia do tego?

Oto mój bieżący kod:

<!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' 
     })

Źródło

2014-11-07 Catfish

użyć dyrektywy! – wbeange

@wprowadzenie problemu tutaj jest zakres - czy możesz dać OP bardziej jednoznaczną odpowiedź na temat zastosowania dyrektywy w elemencie HTML? Przypuszczam, że jeśli ng-app znajduje się na elemencie HTML, może tam działać dyrektywa, ale nigdy nie próbowałem używać jednego poza zakresem kontrolera. –

Musisz mieć swój ng-app podłączony w elemencie <html>, aby mieć jakikolwiek związek między kątem i widokiem. Ponieważ chcesz, aby coś zmieniło się na podstawie aktualnej trasy Twojej aplikacji, możesz użyć tych tras jako punktu odniesienia dla swojej konfiguracji, np. konfiguracja $routeProvider. Dołącz całą konfigurację, w tym konfigurację z klas do stylów lub dowolnej innej konfiguracji w obiekcie trasy. Następnie można utworzyć dyrektywy, który nasłuchuje na zmiany trasy poprzez $routeChangeSuccess a następnie uzyskać aktualną trasę i inne właściwości przy użyciu obiektu $route zdefiniowany jako drugi parametr $routeChangeSuccess słuchacza, skoro masz te właściwości, można zrobić cokolwiek z tym chcesz, e.g. dołączyć klasę do tego elementu dyrektywy.

DEMO

JavaScript

Konfiguracja

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

dyrektywa

.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>

Źródło

2014-11-07 03:19:14 ryeballar

To jest lepsze podejście do ustawiania klasy –

Korzystanie dyrektywa jest jednym ze sposobów, aby przejść.

.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'}" />

Innym - jest ustawienie go za pomocą $rootScope.

Źródło

2014-11-07 02:14:19

Ale czy mogę tego używać poza moją aplikacją ng i kontrolerem ng? Nie sądzę, więc czy utworzyłbym kontroler nadrzędny? Albo jaki jest najlepszy sposób, aby sobie z tym poradzić? – Catfish

Musisz używać go wewnątrz 'ng-app', ale niekoniecznie wewnątrz' ng-kontrolera' –

Wiem, że to stary wątek, ale natknąłem się na niego patrząc na niektóre wskaźniki. Poszedłem na następującą metodę, która wydaje się bardziej "kątowa". Zauważ, że stosuje controllerAs opartych dyrektywy:

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

i jest używany w następujący index.html:

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

Źródło

2016-01-19 13:09:40 iamdash

AngularJS dynamicznie ustawia klasę na tagu <html> na podstawie trasy

Odpowiedz

Powiązane problemy