AngularJS ha impostato dinamicamente la classe sul tag <html> in base al percorso

Non sono sicuro che il modo migliore per avvicinarsi a questo.AngularJS ha impostato dinamicamente la classe sul tag <html> in base al percorso

Desidero impostare dinamicamente una classe sul mio itinerario /login in modo che la mia pagina di accesso possa avere un'immagine di sfondo grande.

Qual è il modo migliore per avvicinarsi a questo?

Ecco il mio codice corrente:

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

fonte

2014-11-07 Catfish

utilizzare una direttiva! – wbeange

@wbeange il problema qui è l'ambito: puoi dare all'OP una risposta più chiara su come una direttiva può essere usata sull'elemento html? Suppongo che se ng-app è sull'elemento html una direttiva potrebbe funzionare lì, ma non ho mai provato a usarne una al di fuori dell'ambito del controller. –

È necessario il ng-app allegato nell'elemento <html> per avere qualsiasi tipo di connessione tra angolare e la vista. Poiché desideri che qualcosa cambi in base al percorso corrente della tua applicazione, allora perché non utilizzare tali percorsi come riferimento per la tua configurazione, ad es. la configurazione $routeProvider. Allega tutta la tua configurazione, inclusa la configurazione dalle classi agli stili o qualsiasi altra configurazione all'interno dell'oggetto del percorso. È quindi possibile creare una direttiva che ascolta cambiamenti di rotta via $routeChangeSuccess e quindi ottenere il percorso corrente e altre proprietà utilizzando l'oggetto $route definito come secondo parametro del $routeChangeSuccess ascoltatore, una volta che hai queste proprietà, si può fare quello vuoi con esso e.g. aggiungere una classe a quell'elemento direttiva.

DEMO

Javascript

configurazione

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

direttiva

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

fonte

2014-11-07 03:19:14 ryeballar

Questo è un approccio migliore su come impostare la classe –

Utilizzando una direttiva è un modo per andare.

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

altro - è quello di impostare tramite $rootScope.

fonte

2014-11-07 02:14:19

Ma posso usarlo al di fuori della mia ng-app e ng-controller? Io non la penso così, quindi dovrei creare un controller genitore? O qual è il modo migliore per gestirlo? – Catfish

Devi usarlo all'interno di 'ng-app' ma non necessariamente all'interno di qualsiasi' ng-controller' –

So che questo è un vecchio thread, ma mi sono imbattuto è alla ricerca di alcuni indicatori. Sono andato per il seguente metodo che si sente più "angolare". Nota, che usa una direttiva controllerAs basata su:

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

Ed è utilizzato come segue in index.html:

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

fonte

2016-01-19 13:09:40 iamdash

AngularJS ha impostato dinamicamente la classe sul tag <html> in base al percorso

risposta

Problemi correlati