在AngularJS的离子框架中使用ui-router

Question

在AngularJS的离子框架中使用ui-router

use*_*007 6 javascript angularjs angular-ui-router ionic-framework

我正在开发一个使用离子框架的应用程序.这又使用了ui-router.目前,我有一个非常基本的两页应用程序.但是,它会扩大到更大.这时,当我从第一个视图转换到第二个视图时,出现错误.错误说:

TypeError: Cannot read property '1' of null
    at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:14235:28
    at updateView (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37839:30)
    at eventHook (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37786:17)
    at Scope.$broadcast (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19725:28)
    at $state.transition.resolved.then.$state.transition (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:31686:22)
    at wrappedCallback (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18429:81)
    at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18515:26
    at Scope.$eval (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19441:28)
    at Scope.$digest (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19267:31)
    at Scope.$apply (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19547:24)

Run Code Online (Sandbox Code Playgroud)

我正在使用Ionic Framework的1.0.0 beta 3.我的app.js文件如下所示:

"use strict";

var myApp = angular.module('myApp', ['ionic', 'ngRoute']);

myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('intro', { url: '/', templateUrl: 'app/account/welcome.html', controller: 'WelcomeController' })
    .state('login', { url: '/account/login', templateUrl: 'app/account/login.html', controller: 'LoginController '})
  ;

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

function WelcomeController($scope) {
}

function LoginController($scope) {
}

Run Code Online (Sandbox Code Playgroud)

我的index.html看起来像这样:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>MyApp</title>

    <link rel="stylesheet" href="/vendor/ionic/release/js/ionic.bundle.min.js" />
    <link rel="stylesheet" href="/css/app.css" />

    <script type="text/javascript" src="/vendor/ionic/release/js/ionic.bundle.js"></script>
    <script type="text/javascript" src="/vendor/angular-route/angular-route.min.js"></script>

    <script type="text/javascript" src="/app/app.js"></script>
    <script type="text/javascript" src="/app/controllers.js"></script>
</head>
<body>
    <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>

        <h1 class="title">MyApp</h1>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right">
    </ion-nav-view>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

welcome.html看起来像这样:

<ion-view>
  <br /><br />
  <h1>Welcome</h1>
  <a class="button" href="/#/account/login">Login</a>
</ion-view>

Run Code Online (Sandbox Code Playgroud)

login.html看起来像这样:

<ion-view>
  <br /><br />
  <h1>Login</h1>
</ion-view>

Run Code Online (Sandbox Code Playgroud)

视图转换得很好.但是,我上面显示的错误令我担忧.我害怕以后它会咬我的屁股.有谁知道会造成什么？有谁知道我怎么解决这个问题？

谢谢!

Answer 1

mha*_*ton 16

如果您使用bundle ionic.js文件,则不需要包含ui-router,它已包含在内.您也不需要包含ng-router.

继承人

归档时间：	11 年，7 月前
查看次数：	14065 次
最近记录：	11 年，4 月前