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

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

但我得到了

Could not resolve ‘register’ from state ”

例外。这里有什么问题?

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

a working example

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

这是一个有点调整的状态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",});

  $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>

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

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

在选项卡中使用命名视图改进的版本为: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',views: { "index" : { templateUrl: "tpl.index.html" } },views: { "register" : { templateUrl: "tpl.register.html",} },});
原文链接:https://www.f2er.com/angularjs/146743.html

猜你在找的Angularjs相关文章