Angular-UI router not working in Ionic app

Question

I'm working on an app using the Ionic Framework and am having trouble attempting to use the Angular-ui router. The first block of code below functions perfectly. However, as soon as I remove ng-controller="LoginController as login" and move this into controller and controllerAs attributes in my route none of the Angular code within my view works anymore. I thought I understood routing, but this issue is tripping me up.

app/login/login.html:

<ion-view view-title="Login">
  <ion-content ng-controller="LoginController as login">

    Email: <input type="text" ng-model="login.email">
    Password: <input type="text" ng-model="login.password">

    <br><br>

    <button ng-click="login.createUser()">Create User</button>

    <br><br>

    <button ng-click="login.removeUser()">Remove User</button>

    <p ng-if="login.message">Message: <strong>{{ login.message }}</strong></p>
    <p ng-if="login.error">Error: <strong>{{ login.error }}</strong></p>
  </ion-content>
</ion-view>

Code that seems to "break" my view, app.config.js:

angular
  .module('app')
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'app/layout/menu.html'
    })

    .state('login', {
      url: '/login',
      templateUrl: 'app/login/login.html',
      controller: 'LoginController',
      controllerAs: 'login'
    })
...

@eugene, there wasn't an error message actually. The page rendered fine, but all Angular code was "disabled" for lack of a better term. No bindings or functions attached to controllers would work. The tip below solved it, setting controller to loginController as login. — MattDionis
– MattDionis, Commented Mar 26, 2015 at 2:46

Aaron Saunders · Accepted Answer · 2015-03-26 01:55:26Z

5

try

.state('login', {
  url: '/login',
  templateUrl: 'app/login/login.html',
  controller: 'LoginController as login'
})

answered Mar 26, 2015 at 1:55

Aaron Saunders

33.4k5 gold badges64 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MattDionis Over a year ago

Thank you, that solved it! Odd issue, as I'd thought setting 'controllerAs' was the proper way.

Aaron Saunders Over a year ago

it is the proper way, but is currently is not supported in Ionic

avck Over a year ago

Thanks it fixed it. But could you explain why was the controller being called twice?

Collectives™ on Stack Overflow

Angular-UI router not working in Ionic app

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related