ไม่สามารถแก้ไข "…" จากสถานะ ""

นี่เป็นครั้งแรกที่ฉันพยายามใช้ ui-router

นี่คือ app.js ของฉัน

angular.module('myApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/index.html");

  $stateProvider.state('index', {
    url: '/'
    template: "index.html",
    controller: 'loginCtrl'
  });


  $stateProvider.state('register', {
    url: "/register"
    template: "register.html",
    controller: 'registerCtrl'
  });
})

อย่างที่คุณเห็นฉันมีสองสถานะ ฉันกำลังพยายามลงทะเบียนสถานะดังนี้:

<a ui-sref="register">
  <button class="button button-balanced">
    Create an account
  </button>
</a>

แต่ฉันกำลังได้รับ

ไม่สามารถแก้ไข 'register' จาก state ''

ข้อยกเว้น ปัญหาที่นี่คืออะไร?

ข้อผิดพลาดประเภทนี้มักหมายความว่าบางส่วนของโค้ด (JS) ไม่ได้โหลด สถานะที่อยู่ข้างในui-srefหายไป

มีตัวอย่างการทำงาน

ฉันไม่ใช่ผู้เชี่ยวชาญด้านไอออนิกดังนั้นตัวอย่างนี้ควรแสดงให้เห็นว่ามันใช้งานได้ แต่ฉันใช้เทคนิคเพิ่มเติมบางอย่าง (ผู้ปกครองสำหรับแท็บ)

นี่คือการปรับสถานะเล็กน้อย def:

.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/index.html");

    $stateProvider

    .state('app', {
      abstract: true,
      templateUrl: "tpl.menu.html",
    })

  $stateProvider.state('index', {
    url: '/',
    templateUrl: "tpl.index.html",
    parent: "app",
  });


  $stateProvider.state('register', {
    url: "/register",
    templateUrl: "tpl.register.html",
    parent: "app",
  });

  $urlRouterProvider.otherwise('/');
}) 

และที่นี่เรามีมุมมองหลักพร้อมแท็บและเนื้อหา:

<ion-tabs class="tabs-icon-top">

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

</ion-tabs>

ใช้มากกว่าตัวอย่างวิธีทำให้มันทำงานและใช้ไอออนิกเฟรมเวิร์กในภายหลังให้ถูกวิธี ... ตรวจสอบตัวอย่างที่นี่

นี่คือคำถาม & คำตอบที่คล้ายกันพร้อมตัวอย่างการใช้มุมมองที่มีชื่อ(เพื่อการแก้ปัญหาที่ดีกว่าแน่นอน) ปัญหาการกำหนดเส้นทางไอออนิกแสดงหน้าว่าง

เวอร์ชันที่ได้รับการปรับปรุงพร้อมมุมมองที่มีชื่อในแท็บอยู่ที่นี่: http://plnkr.co/edit/Mj0rUxjLOXhHIelt249K?p=preview

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name="index"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name="register"></ion-nav-view>
  </ion-tab>

การกำหนดเป้าหมายมุมมองที่มีชื่อ:

  $stateProvider.state('index', {
    url: '/',
    views: { "index" : { templateUrl: "tpl.index.html" } },
    parent: "app",
  });


  $stateProvider.state('register', {
    url: "/register",
    views: { "register" : { templateUrl: "tpl.register.html", } },
    parent: "app",
  });

มาที่นี่เพื่อแบ่งปันสิ่งที่เกิดขึ้นกับฉัน
คุณไม่จำเป็นต้องระบุผู้ปกครองสถานะจะทำงานในลักษณะที่เน้นเอกสารดังนั้นแทนที่จะระบุ parent: app คุณสามารถเปลี่ยนสถานะเป็น app.index ได้

.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/index.html");

$stateProvider.state('app', {
  abstract: true,
  templateUrl: "tpl.menu.html"
});

$stateProvider.state('app.index', {
    url: '/',
    templateUrl: "tpl.index.html"
});

$stateProvider.state('app.register', {
    url: "/register",
    templateUrl: "tpl.register.html"
});

แก้ไขคำเตือนหากคุณต้องการเจาะลึกเข้าไปในรังฉันต้องระบุเส้นทางแบบเต็ม ตัวอย่างเช่นคุณไม่สามารถมีสถานะเช่น

app.cruds.posts.create

โดยไม่ต้องมี

app
app.cruds
app.cruds.posts

หรือเชิงมุมจะทำให้เกิดข้อยกเว้นโดยบอกว่าไม่สามารถหารูทได้ เพื่อแก้ปัญหานั้นคุณสามารถกำหนดสถานะนามธรรมได้

.state('app', {
     url: "/app",
     abstract: true
})
.state('app.cruds', {
     url: "/app/cruds",
     abstract: true
})
.state('app/cruds/posts', {
     url: "/app/cruds/posts",
     abstract: true
})

ฉันเพิ่งมีปัญหาเดียวกันนี้กับ Ionic

ปรากฎว่าไม่มีอะไรผิดปกติกับรหัสของฉันฉันต้องออกจากเซสชันการให้บริการไอออนิกและเรียกใช้บริการไอออนิกอีกครั้ง

หลังจากกลับเข้าสู่แอปรัฐของฉันก็ทำงานได้ดี

ฉันขอแนะนำให้กดบันทึกในไฟล์ app.js ของคุณสองสามครั้งหากคุณใช้งานอึกเพื่อให้แน่ใจว่าทุกอย่างได้รับการคอมไพล์ใหม่

มีปัญหาเดียวกันกับการกำหนดเส้นทางไอออนิก

วิธีแก้ง่ายๆคือใช้ชื่อรัฐ - โดยพื้นฐานแล้ว state.go(state name)

.state('tab.search', {
    url: '/search',
    views: {
      'tab-search': {
        templateUrl: 'templates/search.html',
        controller: 'SearchCtrl'
      }
    }
  })

และในคอนโทรลเลอร์คุณสามารถใช้ได้ $state.go('tab.search');

ฉันมีกรณีที่เกิดข้อผิดพลาดโดยไฟล์

$state.go('');

ซึ่งเห็นได้ชัด. ฉันเดาว่านี่สามารถช่วยใครบางคนได้ในอนาคต

ตามที่ Magus ตอบ:

ฉันต้องระบุเส้นทางแบบเต็ม

สถานะนามธรรมสามารถใช้เพื่อเพิ่มคำนำหน้าให้กับ URL ของรัฐย่อยทั้งหมด แต่โปรดทราบว่าบทคัดย่อยังคงต้องการมุมมอง ui สำหรับเด็ก ๆ ในการเติมข้อมูล ในการดำเนินการนี้คุณสามารถเพิ่มแบบอินไลน์ได้

.state('app', {
   url: "/app",
   abstract: true,
   template: '<ui-view/>'
})

สำหรับข้อมูลเพิ่มเติมโปรดดูเอกสาร: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views