角UI路由器离子应用程序无法正常工作 [英] Angular-UI router not working in Ionic app

问题描述

我正在使用离子型框架的应用程序时遇到了问题尝试使用角UI路由器。下面完美的功能code的第一块。然而，当我删除 NG-控制器=LoginController中作为登录并移动到这一点控制器和 controllerAs 在路线没有我的角度code的我认为作品中的属性了。我想我明白了路由，但这个问题被绊倒了我。

应用程序/登录/ login.html的：

 ＆LT;离子查看查看标题=登陆GT＆;
  ＆LT;离子含量NG控制器=LoginController中作为登录＆GT;    电子邮件：＆LT;输入类型=文本NG模型=login.email＆GT;
    密码：LT;输入类型=文本NG模型=login.password＆GT;    ＆LT; BR＆GT;＆LT; BR＆GT;    ＆LT;按钮NG点击=login.createUser（）＆GT;创建用户和LT; /按钮＆GT;    ＆LT; BR＆GT;＆LT; BR＆GT;    ＆LT;按钮NG点击=login.removeUser（）＆GT;删除用户＆LT; /按钮＆GT;    ＆LT; p NG-IF =login.message＆gt;消息：LT;强＆GT; {{login.message}}＆LT; / STRONG＆GT;＆LT; / P＆GT;
    ＆LT; p NG-IF =login.error＆GT;错误：其中;强＆GT; {{login.error}}＆LT; / STRONG＆GT;＆LT; / P＆GT;
  ＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
 

code，似乎打破我的观点，app.config.js：

 角
  .module（应用）
  的.config（函数（$ stateProvider，$ urlRouterProvider）{
    $ stateProvider    .STATE（'应用'，{
      网址：'/应用程序'，
      摘要：真实，
      templateUrl：应用程序/布局/ menu.html
    }）    .STATE（'登陆'，{
      网址：'/登录'，
      templateUrl：应用程序/登录/ login.html的，
      控制器：'LoginController中'，
      controllerAs：登录
    }）
...
 

解决方案

尝试

  .STATE（'登陆'，{
  网址：'/登录'，
  templateUrl：应用程序/登录/ login.html的，
  控制器：'LoginController中作为登录
}）
 

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'
    })
...

解决方案

try

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

这篇关于角UI路由器离子应用程序无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！