angularjs – 无法解析’…’从状态”

前端之家收集整理的这篇文章主要介绍了angularjs – 无法解析’…’从状态”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我第一次尝试使用ui-router。

这里是我的app.js

  1. angular.module('myApp',['ionic'])
  2.  
  3. .run(function($ionicPlatform) {
  4. $ionicPlatform.ready(function() {
  5. // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  6. // for form inputs)
  7. if(window.cordova && window.cordova.plugins.Keyboard) {
  8. cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  9. }
  10. if(window.StatusBar) {
  11. StatusBar.styleDefault();
  12. }
  13. });
  14. })
  15.  
  16. .config(function($stateProvider,$urlRouterProvider){
  17. $urlRouterProvider.otherwise("/index.html");
  18.  
  19. $stateProvider.state('index',{
  20. url: '/'
  21. template: "index.html",controller: 'loginCtrl'
  22. });
  23.  
  24.  
  25. $stateProvider.state('register',{
  26. url: "/register"
  27. template: "register.html",controller: 'registerCtrl'
  28. });
  29. })

正如你可以看到,我有两个状态。我试图注册状态这样:

  1. <a ui-sref="register">
  2. <button class="button button-balanced">
  3. Create an account
  4. </button>
  5. </a>

但我得到了

Could not resolve ‘register’ from state ”

例外。这里有什么问题?

这种错误通常意味着,(js)代码的某些部分没有加载。那个在ui-sref里面的状态丢失了。

a working example

我不是离子的专家,所以这个例子应该显示它会工作,但我使用了一些技巧(父选项卡)

这是一个有点调整的状态def

  1. .config(function($stateProvider,$urlRouterProvider){
  2. $urlRouterProvider.otherwise("/index.html");
  3.  
  4. $stateProvider
  5.  
  6. .state('app',{
  7. abstract: true,templateUrl: "tpl.menu.html",})
  8.  
  9. $stateProvider.state('index',{
  10. url: '/',templateUrl: "tpl.index.html",parent: "app",});
  11.  
  12.  
  13. $stateProvider.state('register',{
  14. url: "/register",templateUrl: "tpl.register.html",});
  15.  
  16. $urlRouterProvider.otherwise('/');
  17. })

在这里,我们有父视图与标签,及其内容

  1. <ion-tabs class="tabs-icon-top">
  2.  
  3. <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
  4. <ion-nav-view name=""></ion-nav-view>
  5. </ion-tab>
  6.  
  7. <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
  8. <ion-nav-view name=""></ion-nav-view>
  9. </ion-tab>
  10.  
  11. </ion-tabs>

接下来的例子,如何使它运行,以后使用离子框架正确的方法…检查例子here

这里是类似的Q& A有一个使用命名视图(为更好的解决方案)的示例ionic routing issue,shows blank page

在选项卡中使用命名视图改进的版本为:http://plnkr.co/edit/Mj0rUxjLOXhHIelt249K?p=preview

  1. <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
  2. <ion-nav-view name="index"></ion-nav-view>
  3. </ion-tab>
  4.  
  5. <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
  6. <ion-nav-view name="register"></ion-nav-view>
  7. </ion-tab>

定位命名视图:

  1. $stateProvider.state('index',views: { "index" : { templateUrl: "tpl.index.html" } },views: { "register" : { templateUrl: "tpl.register.html",} },});

猜你在找的Angularjs相关文章