按钮单击不在离子框架中打开新页面

时间:2015-06-27 17:08:59

标签: angularjs ionic-framework ionic

这是我的代码。我想在用户点击"登录"按钮。我已经编写了配置函数并设置了状态名称。为什么我的"applicaion.html"页面无法打开。

在控制台中,我可以看到用户名打印,但$state.go('apps')行无效。

[http://codepen.io/skpatel/pen/XbVjKJ][1]
[1]: http://codepen.io/skpatel/pen/XbVjKJ

1 个答案:

答案 0 :(得分:1)

请参阅此更新的代码:http://codepen.io/anon/pen/PqEpbR?editors=101

您错过了index.html中的以下内容:添加对管理视图更改的ui-view(来自ui-router)的引用。 您的代码在index.html中是静态的,没有引用新页面。

ui-view已添加到index.html。这是ui-router指令,是强制性的。 Ionic使用ui-router

<body>
  <div ui-view></div>
</body>

我已将登录页面的代码放入脚本模板中:

<script type="text/ng-template" id="home.html">

  <ion-header-bar class="bar-calm">
        <h1 class="title">Application Permissions</h1>
    </ion-header-bar>
    <ion-content padding="true" has-header="true" padding="true" ng-controller="HomeCtrl">
        <p>Welcome to the privacy mirror home page!</p>
        <p>Enter your name and then you can just tap the login button to be logged in</p>
        <label class="item item-input" class="padding">
            <input type="text" placeholder="Username" ng-model="user.username" required>
        </label>
        <div class="padding">
            <button class="button button-block button-stable" ng-click="login()">Login</button>
        </div>
    </ion-content>
</script>

还创建了apps.html t个emplate:

<script type="text/ng-template" id="apps.html">

  THIS IS MY APP PAGE
</script>

最后,有更新的路由规则指向home.html

  .state('home', {
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            })