Question

您好我为我的应用创建了一个嵌套视图表单。

效果很好......但是我决定在表单中添加更多页面来扩展它的功能（6个表单页面存储在partials / formname.html等等。

表格不会出现。它只是一个空白区域。只是标题/导航栏工作。

我觉得问题在于script.js。控制台似乎没有抛出任何错误。我花了一整天的时间试图弄清楚为什么它不会跑，我真的可以帮忙。感谢

这里是index.html

<!DOCTYPE html>
<html ng-app="financeApp">

<head>
 <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet"  href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
 <script data-require="ui-router@0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
 <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body ng-controller = "demoCtrl">

  <ul class="nav nav-pills pull-right">
   <li ng-class="{active: isState('home') }">
     <a ui-sref="home">Home</a>
   </li>
  <li ng-class="{active: isState('form') }">
    <a ui-sref="form">Form</a>
  </li>
  <li ng-class="{active: isState('contact') }">
    <a ui-sref="contact">Contact</a>
  </li>
 </ul>
 <h3 class="text-muted">Demo Page</h3>
 <br>
 <div ui-view=""></div>


 </body>

 </html>

和script.js

var financeApp = angular.module('financeApp', [
  'ui.router' ])
  .config(['$urlRouterProvider', '$stateProvider',
    function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('home', {
          url: '/',
          templateUrl: 'partials/home.html',
          controller: 'homeCtrl'
        })
        .state('form', {
          url: '/form',
          templateUrl: 'partials/form.html',
          controller: 'formCtrl'
        })






 //note the following are form's child states
          .state('form.goal', {
            url: '/goal',
            templateUrl: 'partials/formGoal.html',
            controller: 'formGoalCtrl'
          })
          .state('form.goalamount', {
            url: '/goalamount',
            templateUrl: 'partials/formGoalamount.html',
            controller: 'formGoalamountCtrl'
          })
          .state('form.risk', {
            url: '/risk',
            templateUrl: 'partials/formRisk.html',
            controller: 'formRiskCtrl'
          })

          .state('form.invest', {
            url: '/invest',
            templateUrl: 'partials/formInvest.html',
            controller: 'formInvestCtrl'
          })
          .state('form.fund', {
            url: '/fund',
            templateUrl: 'partials/formFund.html',
            controller: 'formFundCtrl'
          })
          .state('form.account', {
            url: '/account',
            templateUrl: 'partials/formAccount.html',
            controller: 'formAccountCtrl'
          })

        //contact state
        .state('contact', {
          url: '/contact',
          templateUrl: 'partials/contact.html',
          controller: 'contactCtrl'
        });
    }
  ])


financeApp.controller('demoCtrl', ['$scope', '$state', '$location',
  function($scope, $state, $location) {
    $scope.isState = function(states) {
      return $state.includes(states);
    };
  }
])
 .controller('homeCtrl', ['$scope',
'$state',
  function($scope, $state) {} ]) .controller('formCtrl', ['$scope',
'$state',
  function($scope, $state) {




 //This is to go to one of the child state of formCtrl. Here I choose
//it to go to profile state first.
    //optionally you can use parent property or "abstract = true".
    //or you can use $urlRedirect service.
    $state.go('.profile');
  }
]) .controller('formGoalCtrl', ['$scope', '$state',
  function($scope, $state) {
    //just a simple function to go to the next state using $state.go()
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }
]) .controller('formGoalamountCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }



]) .controller('formRiskCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }



]) .controller('formInvestCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }



]) .controller('formFundCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
   }
    ]) .controller('formAccountCtrl', ['$scope', '$state',
    function($scope, $state) {
    $scope.finished = function(){
      alert('Form Completed!')
     }
    }
   ]) .controller('contactCtrl', ['$scope', '$state',
   function($scope, $state) {
     $scope.contact_str = "This is a string from contactctrl";
   }

    ]);

Answer 1

您的状态未解析的原因是，根据您尝试引用的文件，模板网址路径不正确。 templateUrl的每个值必须是包含partial的文件的实际路径。在您的示例中，您没有名为partials/的目录，您的视图所在的目录。它们与其余文件位于同一目录中。

如果您从'partials/'移除templateUrl，则状态将会解决。

查看代码后的其他一些建议和想法：

在您的顶级表单控制器中，您将重定向到一个名为.profile的子状态，该子状态不存在，因此会抛出错误。
当用户使用前进或后退按钮操作状态时，使用$state.go()中的相对状态可能会导致问题。使用完整的州名称（例如'form.goal'而不是'.goal'）会阻止此操作。
您正在尝试路由到home，为'/home'州设置其他重定向;但是，为了默认为home状态，您必须传入归属状态的URL，即'/'。请查看我对您的插件的更改，以获取下面的工作示例。
最后，正如建议一样，ui.router包含一个名为uiSrefActive的指令，您可以将其与uiSref结合使用，以在nav元素上设置活动类。有关详情，请访问：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active

更新了plunk： http://plnkr.co/edit/L9eCNpwpNHzZmKuY2V4J?p=preview

Angularjs形成问题。表格不可见

1 个答案: