AngulaJS Переход к вложенному абстрактному виду

У меня есть вложенный абстрактный вид в моем угловом проекте js.
У меня есть Error : Cannot transition to abstract state 'main.middle', когда я перехожу к вложенному абстрактному виду.
Мой html код, как показано ниже:AngulaJS Переход к вложенному абстрактному виду

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

    <head> 
    <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
    <script data-require="[email protected]*" 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 я получил сообщение об ошибке.

Может ли кто-нибудь объяснить мне, как перейти к абстрактному виду.

Я ссылался на this, но это не полезно в моем случае.

источник

2016-06-30 Harsh Patel

Вы никогда не go абстрактного состояния. От docs:

Абстрактное состояние может иметь дочерние состояния, но не может активироваться. «Абстрактное» состояние - это просто состояние, к которому нельзя перейти. Он активируется неявно, когда один из его потомков активирован.

Если определить main.middle.alpha, main.middle.beta и main.middle.gama не абстрактную, вы можете переходить к тем.

источник

2016-06-30 06:39:32

Затем, как обрабатывать такие сценарии, у меня есть 'link' to' alpha', 'beta' и' gama' в 'middle', когда я нажимаю на любую ссылку,' middle 'просмотр перезагружен. ('middle' не является' абстрактным' в данном случае) –

Прошу прощения, я не совсем понимаю. Если вы нажмете на одну из этих трех ссылок 'ui-sref', они должны загрузить соответствующее дочернее состояние из середины. –

Какие сценарии? Ваш код выше имеет 'main.middle' как абстрактный. –

Как уже упоминалось в angualr документы

Абстрактный состояние может иметь дочерние состояния, но не может активизироваться себя. «Абстрактное» состояние - это просто состояние, которое не может быть переведено на . Он активируется неявно, когда активируется один из его потомков.

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

, как абстрактное состояние не может быть обработан и не может рассматриваться. если вы хотите получить доступ, тогда удалите abstract строка

источник

2016-06-30 06:48:02

AngulaJS Переход к вложенному абстрактному виду

ответ

Смежные вопросы