Question

我是Angluar.JS的初学者。我希望单页应用程序带有一行选项卡，每个选项卡都可以包含另一行选项卡，每个选项卡都包含一个视图。

所以，我问this question并接受了一个答案，该答案在http://plnkr.co/edit/BUbCR8?p=preview进行了演示。

演示非常接近，但是使用了列表而不是第二行标签，所以我试图修改代码。到目前为止，我只有一个骨架，一个带有视图的嵌套选项卡概念的证明。我将在稍后删除实际内容。

我将在下面发布我的代码，但问题出在此处：

当我拖延时将索引，html文件放入浏览器，它工作正常。我可以点击一下，我期待发生的事情似乎发生了。在标签Left，Centre＆amp;之间移动时，没什么可看的。 Right;到目前为止，行动在Link＆amp; Link2的{{1}}。

看起来很完美 - 直到按F5并刷新页面，然后我开始在JS控制台中发现错误：

Left tab

如果我将文件拖回浏览器，一切都很好。 Chrome和Chrome中的行为相同火狐。

知道我做错了吗？

的index.html

Error: Could not resolve '.link2' from state 'left.link1'
    at Object.t.transitionTo (http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js:7:8834)
    at Object.t.go (http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js:7:8182)
    at http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js:7:15639
    at http://code.angularjs.org/1.2.9/angular.js:13585:28
    at completeOutstandingRequest (http://code.angularjs.org/1.2.9/angular.js:4111:10)
    at http://code.angularjs.org/1.2.9/angular.js:4418:7

app.js

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

<!-- http://plnkr.co/edit/BUbCR8?p=preview -->    

<head>
  <meta charset="utf-8" />
  <title>Nested tabs demo</title>
  <link data-require="bootstrap-css@*" data-semver="3.0.3" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  <link data-require="font-awesome@*" data-semver="4.0.3" rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
  <script data-require="angular-animate@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular-animate.js"></script>
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>

 <!-- Our stuff -->    
  <script src="app.js"></script>
  <script src="controller.js"></script>
</head>

<body ng-controller="Tabs">

  <div style="border-style:solid;border-width:1">  <!-- FixMe: uses CSS, not inline style -->
    <h3>Nested tabs demo</h3>
  </div>    

    <!-- ToDO: how to set initial state & view
  <span>$state = <b>{{$state.current.name}}</b></span><br>
  <span>$state url = <b>{{$state.$current.url.source}}</b></span>
  -->

    <tabset>
      <tab>
        <tab-heading>
          <a ui-sref="left" ui-sref-active="active">Left</a>
        </tab-heading>
      </tab>

      <tab>
        <tab-heading>
          <a ui-sref="centre" ui-sref-active="active">Centre</a>
        </tab-heading>
      </tab>

        <tab>
        <tab-heading>
          <a ui-sref="right" ui-sref-active="active">Right</a>
        </tab-heading>
      </tab>
    </tabset>
    <div class="row">
      <br>
        <div ui-view="viewA">
          <!--Here is the A content-->
        </div>
    </div>
</body>

controller.js

var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls', 'ui.router'])
.run(['$rootScope', '$state', '$stateParams',
      function ($rootScope, $state, $stateParams) {
      // It's very handy to add references to $state and $stateParams to the $rootScope
      // so that you can access them from any scope within your applications.For example,
      // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
      // to active whenever 'contacts.list' or one of its decendents is active.
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
      }]);
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $locationProvider.html5Mode(false).hashPrefix('!');
  $stateProvider
    .state('left', {
      url: "/",
      views: {
        "viewA": {
          template: '<h1>Left Tab, index.viewA</h1><br></h1><div>' +        
                    '<tabset>' +
                    '   <tab>' +        
                    '     <tab-heading>' +        
                    '       <a ui-sref=".link1">Link1</a><br>' +
                    '     </tab-heading>' +            
                    '   </tab>' +        
                    '   <tab>' +        
                    '      <tab-heading>' +            
                    '        <a ui-sref=".link2">Link2</a></div>' +
                    '      </tab-heading>' +            
                    '    </tab>' +        
                    '</tabset>' +                        
                    '<div class="col-xs-6">' +
                    '<div ui-view="viewA.link1"></div>' +
                    '<div ui-view="viewA.link2"></div></div>'
        },
        "viewC": {
          template: 'Left Tab, viewC <div ui-view="viewC.link1"></div>' +
                    '<div ui-view="viewC.link2"></div>'
        }
      }
    })
    .state('left.link1', {
      url: 'link1',
      views: {
        "viewA.link1": {
          template: '<h2>viewA Nest Link1</h2><ul>' +
                    '<li ng-repeat="thing in link1things">{{thing}}</li></ul>',
          controller: 'Tab1Link1Ctrl',
          data: {}
        },
        "viewC.link1": {
          template: 'Link1'
        }
      }
    })
    .state('left.link2', {
      url: 'link2',
      views: {
        "viewA.link2": {
          template: '<h2>viewA Nest Link2</h2><ul>' +
                    '<li ng-repeat="thing in link2things">{{thing}}</li></ul>',
          controller: 'Tab1Link2Ctrl',
          data: {}
        },
        "viewC.link2": {
          template: 'Link2'
        }
      }
    })

    .state('centre', {
      url: "/centre",
      views: {
        "viewA": {
          template: '<h1>Centre Tab, viewA</h1>',
          controller: '2ndTabCtrl',
          data: {}
        },
        "viewC": {
          template: 'Centre Tab, viewC <div ui-view="viewC.list"></div>'
        }
      }
    })

    .state('right', {
      url: "/right",
      views: {
        "viewA": {
          template: '<h1>Right Tab, viewA</h1>',
          controller: '2ndTabCtrl',
          data: {}
        },
        "viewC": {
          template: 'Right Tab, viewC <div ui-view="viewC.list"></div>'
        }
      }
    });

});

Answer 1

在模板中

触发状态'.link1'：

<a ui-sref=".link1">Link1</a>

但是你没有在状态配置中定义一个名为'.link1'的状态。你有一个名为'left.link1'的州。那是你的意思吗？

P.S。在未来，只需使用您的示例创建一个plunkr，这是一个滚动浏览多个文件的痛苦

嵌套视图错误 - 仅在刷新页面后

1 个答案: