Question

从任何来源导航到状态“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>

Answer 1

我怀疑你没有得到任何错误信息。您的控制器执行以下操作：

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

因此它尝试定义id的{{1}}属性，该属性从未在任何地方定义过。

代码应为

vm.titulo

白色屏幕，没有错误消息

1 个答案: