Angular: Ionic Test 1

http://angularjs.org/

by aubz88

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/0.9.27/css/ionic.css">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.7.8/angular-messages.min.js"></script>
<html ng-app="myApp">
  <div ng-controller="MyController as rvm">
    <button ng-click="rvm.showPopup()">Show</button>
  </div>

</html>

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

  <form name="verifyCredentials" novalidate="">

    <!-- username -->
    <label class="item item-input item-stacked-label item-icon-right" ng-class="{ 'has-error' : verifyCredentials.password.$invalid && (verifyCredentials.$submitted || verifyCredentials.$dirty) }">
        <span class="input-label">Username</span>
        <input
            id="username"
            type="text"
            name="username"
            ng-model="data.username"
            placeholder="username"
            required>
    </label>

    <div ng-messages="verifyCredentials.username.$error" ng-if="(verifyCredentials.$submitted || verifyCredentials.$dirty)">
      <div class="form-error" ng-message="required">username required</div>
    </div>

    <!-- password -->
    <label class="item item-input item-stacked-label item-icon-right" ng-class="{ 'has-error' : verifyCredentials.password.$invalid && (verifyCredentials.$submitted || verifyCredentials.$dirty) }">
        <span class="input-label">Password</span>
        <input
            id="password"
            type="password"
            name="password"
            ng-model="data.password"
            placeholder="password"
            required>

        <span ng-mousedown="viewPassword()">
            <i class="icon" ng-class="peye"></i>
        </span>

    </label>

    <div ng-messages="verifyCredentials.password.$error" ng-if="(verifyCredentials.$submitted || verifyCredentials.$dirty)">
      <div class="form-error" ng-message="required">password required</div>
   ...

JavaScript

var app = angular.module('myApp', ['ionic']);
    app.controller('MyController', MyController);
    app.service('TestCredentials', TestCredentials);

    MyController.$inject = ['TestCredentials'];

    function MyController(TestCredentials) {
      var vm = this;
      vm.showPopup = function() {
        console.log('here');
        TestCredentials.test();
      };
    }

    TestCredentials.$inject = ['$ionicPopup'];

    function TestCredentials($ionicPopup) {

      return {
        test: test
      };

      function test() {

        // Custom popup
        var myPopup = $ionicPopup.show({
          templateUrl: 'templates/main.html',
          title: 'verify crendetials',
          subTitle: 'Your session has expired. Please enter your credentials again.',

          buttons: [{
              text: 'Not Now'
            },
            {
              text: 'Verify',
              type: 'button-positive',
              onTap: function(e) {

                //console.log(this.verifyCredentials);

                // if (!$scope.verifyCredentials.isValid) {
                //    //don't allow the user to close unless he enters model...
                //    e.preventDefault();
                // } else {
                //    return $scope.data.model;
                // }

              }
            }
          ]
        });

        myPopup.then(function(res) {
          console.log('Tapped!', res);

          //send the data to the server



        });

        // if success RegisterUserCredentials.registerCredentials
        // if not success then

      }

    }