2016-07-02 28 views
1

從任何原點導航到「editarTitulo」狀態時,顯示一個白色屏幕,沒有錯誤信息。我在很多地方使用了這個解決方案,但沒有任何效果。 我的代碼:白色屏幕並且沒有錯誤信息

模塊:

(function() { 
    angular.module('gerenciadorEpisodios', ['ui.router', 'ui.bootstrap']); 
})(); 

路由器:

(function() { 

    'use strict'; 

    angular 
    .module('gerenciadorEpisodios') 
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) { 

     $urlRouterProvider.otherwise('/home'); 

     $stateProvider.state('home', { 
      url: '/home', 
      views: { 
       nav: { 
        templateUrl: 'view/navbar.html' 
       }, 
       content: { 
        templateUrl: 'view/home.html', 
        controller: 'HomeController', 
        controllerAs: 'vm' 
       } 
      }  
     }); 

     $stateProvider.state('meusTitulos', { 
      url: '/meus_titulos', 
      views: { 
       nav: { 
        templateUrl: 'view/navbar.html' 
       }, 
       content: { 
        templateUrl: 'view/meus_titulos.html', 
        controller: 'MeusTitulosController', 
        controllerAs: 'vm' 
       } 
      }, 
      resolve: { 
       titulosPrepService : titulosPrepService 
      } 
     }); 

     $stateProvider.state('novoTitulo', { 
      url: '/novo_titulo', 
      views: { 
       nav: { 
        templateUrl: 'view/navbar.html' 
       }, 
       content: { 
        templateUrl: 'view/novo_titulo.html', 
        controller : 'NovoTituloController', 
        controllerAs: 'vm' 
       } 
      } 
     }); 

     $stateProvider.state('editarTitulo', { 
      url: '/editar_titulo/:id', 
      view: { 
       nav : { 
        templateUrl: 'view/navbar.html' 
       }, 
       content: { 
        templateUrl: 'view/editar_titulo.html', 
        controller : 'EditarTituloController', 
        controllerAs : 'vm', 
       } 
      } 
     }); 

     $stateProvider.state('about', { 
      url: '/about', 
      views : { 
       nav: { 
        templateUrl: 'view/navbar.html' 
       }, 
       content: { 
        template: '<h4>Created by: Leonardo Cardena</h4>'} 
       } 
      }); 

     titulosPrepService.$inject = ['tituloService']; 

     /* @ngInject */ 
     function titulosPrepService (tituloService) { 
      return tituloService.getTitulos(); 
     } 

    }]) 

})(); 

MeusTitulosController:

(function() { 

    'use strict'; 

    angular 
    .module('gerenciadorEpisodios') 
    .controller('MeusTitulosController', MeusTitulosController); 

    MeusTitulosController.$inject = ['titulosPrepService', 'tituloService']; 

    /* @ngInject */ 
    function MeusTitulosController(titulosPrepService, tituloService) { 

     var vm = this; 
     vm.titulos = titulosPrepService;   

    } 

})(); 

EditarTituloController:

(function() { 

    'use strict'; 

    angular 
    .module('gerenciadorEpisodios') 
    .controller('EditarTituloController', EditarTituloController); 

    EditarTituloController.$inject = ['$stateParams']; 

    /* @ngInject */ 
    function EditarTituloController($stateParams){ 

     var vm = this; 
     vm.titulo.id = $stateParams.id; 

    } 

})(); 

meus_titulos.html

<div class="container"> 
    <h2 class="meus-titulos">Meus Títulos</h2> 
    <div class="table-responsive"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th>Título</th> 
     <th>Episódio Atual</th> 
     <th>Episódios Totais</th> 
     <th>Temporada Atual</th> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="titulo in vm.titulos | orderBy: 'nome' track by titulo.id"> 
     <td>{{titulo.nome}}</td> 
     <td>{{titulo.episodioAtual}}</td> 
     <td>{{titulo.episodiosTotais}}</td> 
     <td>{{titulo.temporada}}</td> 
     <td> 
      <a ui-sref="editarTitulo({id : titulo.id})"> 
      Editar 
      </a> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
    </div> 
</div> 

editar_titulo.html

<div> 
    test 
</div 

的index.html

<!DOCTYPE html> 
<html ng-app="gerenciadorEpisodios"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Gerenciador de Episódios</title> 
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="css/app.css"> 
</head> 
<body> 
    <div ui-view="nav"></div> 
    <main ui-view="content" role="main"></main> 

    <!--libs imports--> 
    <script src="lib/angularjs/angular.js"></script> 
    <script src="lib/angularjs/angular-messages.js"></script> 
    <script src="lib/angularjs/angular-ui-router.js"></script> 
    <script src="lib/angularjs/ui-bootstrap.js"></script> 
    <!--module import--> 
    <script src="js/gerenciador-episodios.module.js"></script> 
    <!--routes import--> 
    <script src="js/config/gerenciador-episodios.routes.js"></script> 
    <!--values import--> 
    <script src="js/value/url-base.value.js"></script> 
    <!--services import--> 
    <script src="js/service/titulo.service.js"></script> 
    <!--controllers import--> 
    <script src="js/controller/home.controller.js"></script> 
    <script src="js/controller/meus-titulos.controller.js"></script> 
    <script src="js/controller/novo-titulo.controller.js"></script> 
    <script src="js/controller/editar-titulo.controller.js"></script> 
</body> 
</html> 

回答

0

我懷疑你沒有得到任何錯誤消息。控制器執行以下操作:

var vm = this; 
vm.titulo.id = $stateParams.id; 

所以它試圖定義id屬性的vm.titulo,這是從來沒有在任何地方定義。

的代碼應該是

vm.titulo = { 
    id: $stateParams.id 
}; 
+0

這是真的。此外,問題可能出現在'$ state'解析器中,因爲'ui.router' [往往會失敗](https://github.com/angular-ui/ui-router/issues?utf8=%E2%9C% 93 q =無聲) –