I'm working on an app that uses the ionic framework. This in-turn uses the ui-router. Currently, I have a pretty basic two-page app. However, it will expand to be much larger. At this time, I get an error when I transition from my first view to my second view. The error says:
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) I am using 1.0.0 beta 3 of the Ionic Framework. My app.js file looks like this:
"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) { } My index.html looks like this:
<!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 looks like this:
<ion-view> <br /><br /> <h1>Welcome</h1> <a class="button" href="/#/account/login">Login</a> </ion-view> login.html looks like this:
<ion-view> <br /><br /> <h1>Login</h1> </ion-view> The view transitions just fine. However, the error I showed above concerns me. I'm afraid its going to bite me in the ass later. Does anyone know what would be causing this? Does anyone know how I can fix this?
Thank you!