转到嵌套抽象视图

我在angular js项目中嵌套了抽象视图。
当我移动到嵌套抽象视图时，我得到了Error : Cannot transition to abstract state 'main.middle'。
我的html代码如下:

<!DOCTYPE html>
<html ng-app="nesting">
  <head>
    <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@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="testController">
    href:
    <br /> 
    <a href="#/alpha">#/alpha</a>
    <a href="#/beta">#/beta</a>
    <a href="#/gama">#/gama</a>
    <button ng-click="moveToMiddle()">move to middle</button>
    <br />
    ui-sref:
    <br /> 
    <a ui-sref="main.middle.alpha">main.middle.alpha</a>
    <a ui-sref="main.middle.beta">main.middle.beta</a>
    <a ui-sref="main.middle.gama">main.middle.gama</a>
    <hr />
    <div ui-view=""></div>
    <script>
      'use strict';
      var $urlRouterProviderRef = null;
      var $stateProviderRef = null;
      var app = angular.module('nesting', [
        'ui.router'
      ]);
      app.config(function( $urlRouterProvider, $stateProvider) {
          $urlRouterProvider.otherwise('/alpha');

          $stateProvider
            .state('main', {
                url: "",
                abstract: true,
                template: '<div><h3>Main</h3><div ui-view=""></div></div>',
            })
            .state('main.middle', {
                url: "",
                abstract: true,
                template: '<div><h4>Middle</h4><div ui-view=""></div></div>',
            })
            .state('main.middle.alpha', {
                url: "/alpha",
                template: '<div><h5>The leaf: {{state.name}}</h5></div>',
                controller: function ($scope, $state){
                  $scope.state = $state.current;
                },
            })
            .state('main.middle.beta', {
                url: "/beta",
                template: '<div><h5>The leaf: {{state.name}}</h5></div>',
                controller: function ($scope, $state){
                  $scope.state = $state.current;
                },
            })
            .state('main.middle.gama', {
                url: "/gama",
                template: '<div><h5>The leaf: {{state.name}}</h5></div>',
                controller: function ($scope, $state){
                  $scope.state = $state.current;
                },
            })
            ;
      });     
      app.controller('testController', function ($scope, $state) {
          $scope.moveToMiddle = function () {
             $state.go('main.middle');
          }
      })
    </script>
  </body>
</html>

当我点击move to middle按钮时，我得到了错误。

如何移动到抽象视图?

你永远不会进入抽象状态。来自文档:

抽象状态可以有子状态，但不能自己激活。"抽象"状态只是一种无法转换的状态。当它的一个后代被激活时，它被隐式激活。

如果您将main.middle.alpha, main.middle.beta和main.middle.gama定义为非抽象，则可以过渡到这些

如angur docs

所述

抽象状态可以有子状态，但不能被激活本身。一个"抽象"的状态就是一种不可能存在的状态转换到。它被隐式激活，当它的后代被激活。

 app.controller('testController', function ($scope, $state) {
          $scope.moveToMiddle = function () {
             $state.go('main.middle.alpha');
          }

作为抽象状态不能被实例化，也不能被查看。如果你想访问，然后删除abstract行

相关内容

最新更新

热门标签：