在 AngularJS 的 ionic 框架中使用 ui-router

2023-12-31

我正在开发一个使用离子框架的应用程序。这又使用了 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) 

我正在使用 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) {
}

我的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>

welcome.html 看起来像这样:

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

login.html 看起来像这样:

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

视图转换得很好。然而,我上面显示的错误让我担心。我担心它稍后会咬我的屁股。有谁知道这会是什么原因造成的?有谁知道我该如何解决这个问题?

谢谢你!


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

这是代码笔 http://codepen.io/mhartington/pen/CAxFG

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 AngularJS 的 ionic 框架中使用 ui-router 的相关文章

随机推荐

  • ASP.NET WebAPI - 如何使用 $.getJSON 传递对象

    我有一个 ASP NET WebAPI 控件如下 public SomeObject GetBenchMarkData Comment comment do stuff 在客户端 我正在尝试以下操作 var comment ID 0 Tex
  • 如何在OpenCV中用随机颜色绘制圆圈

    我正在使用 SURF 算法与 OpenCV 匹配两个图像 我已经掌握了关键点 现在我想用随机颜色的圆圈绘制这些关键点 我知道如何用函数 cvCircle 在 OpenCV 中画一个圆 但颜色是固定的cvScalar r g b 我希望图像中
  • 为什么 Ember.onerror() 没有捕获断言失败错误。?

    我的代码中有一种情况 我需要跟踪生产中的错误 I used ember js作为我的框架 为了跟踪我使用的生产中发生的错误Ember Onerror它只为我提供任何功能错误跟踪 Ember onerror function error Em
  • 如何让 Python 说话

    我怎样才能让 Python 说出一些文本 我可以将 Festival 与子进程一起使用 但我无法控制它 或者可能在交互模式下 但它不会是干净的 有Python TTS 库吗 比如 Festival eSpeak 的 API 您应该尝试使用
  • Jenkins+Github:我们无法交付此有效负载:无法连接到服务器

    我正在尝试在 GitHub 上配置 Web 挂钩 以便它可以将 POST 发送到http 127 0 0 1 8080 github webhook http 127 0 0 1 8080 github webhook 我的詹金斯正在运行h
  • 使用 FormData 和 multer 上传文件

    我已成功使用以下命令将文件上传到节点服务器multer通过使用输入文件对话框选择文件然后提交表单来模块 但现在我需要创建一个FormData对象 并使用发送文件XMLHttpRequest 但它不起作用 文件总是undefined在服务器端
  • kubespray 仪表板警告禁止弹出窗口

    我正在尝试使用 kubespray 在一台机器上设置一个新的 kubernetes 集群 提交 7e84de2ae116f624b570eadc28022e924bd273bc 运行剧本后 在新的 ubuntu 16 04 上 我打开仪表板
  • knockout.js 真的采用了 MVVM 模式吗?

    我是 knockout js 的新手 不久前我读到了 ko 的标题特征 我不明白ko真的是MVVVM吗 因为他们谈论的只是数据绑定及其易用性 但我确信 MVVM 不仅仅是数据绑定 不是吗 是的 knockout js 确实应用了 MVVM
  • 如何使用 sqlalchemy 在 Docker 中访问 postgresql?

    我正在尝试使用 SQLAlchemy 与 dockerized PostgreSQL 服务器交互 就像是 engine create engine postgresql user user password localhost 5432 d
  • 如何在RTL中使用时钟门控?

    我正在对一些时钟进行门控latch以及我设计中的逻辑 我在综合和布局布线方面没有太多经验 在 RTL 中实现时钟门控的正确方法是什么 示例1 always comb begin gated clk clk latch update en e
  • 如何使用 connect w/ Redux 从 this.props 获得简单的调度?

    我有一个简单的 React 组件 可以连接 映射一个简单的数组 状态 为了避免引用商店的上下文 我想要一种直接从道具获取 调度 的方法 我见过其他人使用这种方法 但由于某种原因无法使用它 以下是我当前使用的每个 npm 依赖项的版本 rea
  • 在表单提交时,从 javascript 发送带有表单值的 mailto

    我有一个表单 当提交表单 输入类型 提交 时 我想使用预先填充的电子邮件消息打开客户端默认邮件浏览器 因此 当用户单击提交时 需要发生两件事 打开电子邮件并提交表格 另外 如何使用表单中输入的值来预填充电子邮件 我是 javascript
  • 找不到创建 iOS 应用程序开发证书的选项 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 请参阅此图片 iOS 应用程序开发选项已禁用 我如何启用它 您需要成为团队代理或管理员才能创建开发证书 Source https deve
  • C++ 错误:与“operator=”不匹配

    给数组赋值时遇到问题 我创建了一个名为Treasury 我创建了另一个类TradingBook我想包含一个全局数组Treasury可以从所有方法访问TradingBook 这是我的 TradingBook 和 Treasury 的头文件 c
  • 如何将数据传输到另一个页面

    海 我有一个包含 150 个控件的 ASP NET 页面 我想将这些控件的数据传输到另一个 ASP NET 页面 什么方法最适合这项任务 控制数量可能会增加 提前致谢 有很多方法 使用查询字符串 可能不适用于您的情况 仅适用于传输少量数据
  • 引用 IBM.Data.DB2 中的代码使得该程序集对我的解决方案的其余部分不可用

    我有一个包含三个程序集的 C 控制台应用程序 Main Common and Utilities 在一个文件中Main集会 Main cs 我有一行 using Utilities 在目录内Common程序集 我有DLLIBM Data D
  • 从 pmdarima 导入 auto_arima 时:错误:无法从 'scipy.misc' 导入名称 'factorial'

    我有 python 3 7 1 和 scipy 版本 1 3 0 我在调用 auto arima 时遇到错误 无法从 scipy misc 导入名称 factorial 只是这个基本的导入导致了问题 从 pmdarima arima 导入
  • Angular2 CLI:为什么“--prod”的包大小小于“--prod --aot”?

    我正在为一个项目使用最新的 angular cli beta 18 我知道 cli 仍处于非常早期的阶段 但我很困惑为什么我的最终包大小实际上更小without AoT 当我跑步时ng build prod 为 1 08 MB Asset
  • 将命令发送到现有 MATLAB IDE 命令窗口

    打开 MATLAB IDE 后 我们是否仍然可以从另一个进程写入其命令窗口 在 Windows 中 我们可以使用 MATLAB Engine API 附加到现有的 MATLAB 但这在 Linux Mac 中不起作用 Linux 下我们有什
  • 在 AngularJS 的 ionic 框架中使用 ui-router

    我正在开发一个使用离子框架的应用程序 这又使用了 ui router 目前 我有一个非常基本的两页应用程序 然而 它会扩大到更大 此时 当我从第一个视图转换到第二个视图时出现错误 错误说 TypeError Cannot read prop