CODEWITHSUNDEEP
angularjsionic-framework
sam_k
sam_k

Reputation: 6023

Button click not open new page in ionic framework

Here is my code. I want to open a new page when user click on "Login" button. I already wrote config function and set state name also. Why my "applicaion.html" page is not opening.

In console I can see username print but $state.go('apps') line is not working.

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

Upvotes: 1

Views: 1195

Answers (1)

aorfevre
aorfevre

Reputation: 5064

See this updated code: http://codepen.io/anon/pen/PqEpbR?editors=101

You missed the following into index.html: add a reference to ui-view (from ui-router) that is managing the change of views. Your code was static into index.html with no reference to new pages.

Ui-view has been added to index.html. This is ui-router directive and is mandatory. Ionic uses ui-router

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

I have put out code of login page into a script template :

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

And also created a apps.html template:

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

  THIS IS MY APP PAGE
</script>

Finally, there is the routing rules to update to point to home.html

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

Upvotes: 1

Related Questions