angular ui-router importing css

Question

I want to load css on demand but I don't get it.

This is the file structure

index.html

<script src="js/ui-router-styles.js"></script>
<script src="js/app.js"></script>
<script src="js/dao.js"></script>
<script src="js/controllers.js"></script>


....


</head>
  <body ng-app="starter" ui-router-styles>
    <div ui-view></div>
  </body>

app.js

var my_app = angular.module('starter', ['starter.posicion_integrada', 'uiRouterStyles','ionic','pascalprecht.translate']);

config part

my_app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  $ionicConfigProvider.backButton.previousTitleText(false);
  $ionicConfigProvider.backButton.text('');

  $stateProvider
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'views/menu.html',
    controller: 'appController'
  })

  .state('app.CarrouselSearcher', {
    url: '/CarrouselSearcher/:entUsuario/:codUsuario',
    views: {
      'menuContent': {
        templateUrl: 'views/carrouselSearcher.html',
        controller: 'carrouselsearcherCtrl',
        data: {
          css: ['css/tabla.css', 'css/carousel.css']
        }
      }
    }
  })

did you tried to move ng app to html ? and plz show us your all app.js i mean config part — Michal Kucaj
– Michal Kucaj, Commented Feb 16, 2016 at 14:31
I think you forget to add angular-ui-router.js with this css noramlly loading with your state — Michal Kucaj
– Michal Kucaj, Commented Feb 16, 2016 at 16:30

Michal Kucaj · Accepted Answer · 2016-02-17 11:41:39Z

I found a problem of your code in ui-router-styles.js

is

for(var state = toState; state && state.name !== ''; state=$$parentState(state)) {
          if(state && state.data && state.data.css) {
            if(!Array.isArray(state.data.css)) {
              state.data.css = [state.data.css];
            }

            angular.forEach(state.data.css, function(css) {
              // css = {name: 'layout', href: '/layout.css'}
              if(typeof css === 'object' && css.name && css.href && !stylesObject[css.name]) {
                stylesObject[css.name] = css.href;
              }else if(typeof css === 'string') {
                stylesObject[css] = css;
              }
            });

in your

.state('app.CarrouselSearcher',

your data.css is in another object

state.current.views.menuContent.data.css;

// this condition checks just state.data.css

 if(state && state.data && state.data.css) {

your css are in views.menuContent then data.css

so this directive cant finds css from multiple views

Collectives™ on Stack Overflow

angular ui-router importing css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related