离子框架中的空白页问题

时间:2016-10-03 12:33:15

标签: javascript angularjs cordova ionic-framework phonegap-plugins

当我尝试使用$ state.go(' app.home')将一个页面导航到另一个页面时;显示空白页面。我认为问题背后的原因是代码中断,而Angular正在初始化应用程序并且它最终无法显示第一个视图的模板,因此屏幕只显示一个空页面。如何解决这个问题问题

my detail.js

$scope.submitOrder = function (datetimeValue, order_desc) {

                        var flag = true;
            var error_msg = "";
            if (service_id == 0 && flag) {

                error_msg = '<p dir="rtl">testmessage</p>';
                flag = false;
            }
            if ($scope.address == '' && flag) {

                error_msg = '<p dir="rtl">testmessage</p>';
                flag = false;
            }
            if (datetimeValue == '' && flag) {
                error_msg = '<p dir="rtl">testmessage</p>';
                flag = false;
            }



            if (!flag) {
                var alertPopup = $ionicPopup.alert({
                    title: 'testmessage'
                    , template: error_msg
                    , okText: 'agree'
                });
            }


            if (flag) {
                var link = "http://test/myapp/" + "cusOrder.php";
                upload();
                if ($scope.pictureUrl.length + 1 < 5) {

                    while ($scope.pictureUrl.length < 5) {
                        $scope.pictureUrl.push("");
                    }

                }
                $http.post(link, {
                    order_date: datetimeValue
                    , cust_id: custId
                    , ser_id: service_id
                    , problem_desc: order_desc
                    , loc_x: $scope.poslat
                    , loc_y: $scope.poslng
                    , loc_name: $scope.address
                    , picture_url: $scope.pictureUrl
                }).then(function (res) {

                    if (res.data['data'] == 0) {
                        var alertPopup = $ionicPopup.alert({
                            title: 'testmessage'
                            , template: '<p dir="rtl">success</p>'
                            , okText: 'agree'
                        });

                        service_id=0;


                        $state.go('app.home');


                    }
                }, function (err) {
                    //$state.go('offlineNetwork',{obj:{PageName:'newclient'}});
                });
                $scope.pictureUrl = [];
            }
            //$scope.pictureUrl 
            //should call the upload function here 
        };

我的app.js

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
  $ionicConfigProvider.backButton.text('').previousTitleText('');
  $stateProvider
 .state('app', {
   url: "/app",
   abstract: true,
   templateUrl: "templates/menu.html",
   controller: 'AppCtrl'
 })
 .state('app.detail', {
     url: "/detail",
     views: {
      'menuContent': {
        templateUrl: "templates/detail.html",
        controller: 'DetailCtrl'
      }
    }
  })
   .state('app.contact', {
    url: "/contact",
    views: {
      'menuContent': {
        templateUrl: "templates/contact.html"
      }
    }
  })
   .state('app.payment', {
    url: "/payment",
    views: {
      'menuContent': {
        templateUrl: "templates/payment.html"
      }
    }
  })
  .state('app.cart_detail', {
    url: "/cart_detail",
    views: {
      'menuContent': {
        templateUrl: "templates/cart_detail.html"
      }
    }
  })
   .state('app.about', {
    url: "/about",
    views: {
      'menuContent': {
        templateUrl: "templates/about.html"
      }
    }
  })
  .state('slide', {
    url: "/slide",
    templateUrl: "templates/slide.html"
  })
   .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'

    })
 .state('register', {
      url: '/register',
      templateUrl: 'templates/register.html',
      controller: 'RegisterCtrl'
    })

//start r@khi

 .state('app.paymentnotification', {
    url: "/paymentnotification",
    views: {
      'menuContent': {
        templateUrl: "templates/paymentnotification.html",
             controller: 'PaymentCtrl'  
            }
    }
  })

  .state('verification', {
    url: "/verification",
 views: {
      '': {
    templateUrl: "templates/verification.html",
        controller: 'RegisterCtrl'
}
}
  })

 .state('paymentsecurity', {
    url: "/paymentsecurity",
    templateUrl: "templates/paymentsecurity.html",
        controller: 'OrderpaymentCtrl'


  })


    .state('app.home', {
      url: "/home",
      views: {
        'menuContent': {
          templateUrl: "templates/home.html",
          controller: 'HomeCtrl'
        }
      }
    })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');
});

我的index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!--<link href="css/animate.css" rel="stylesheet">-->
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->


    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="js/angular-animate.js"></script>
    <!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
    <script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
    <link href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="plugins/org.apache.cordova.file/www/File.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/org.apache.cordova.file-transfer/www/FileTransfer.js"></script>
    <!-- your app's js -->
    <script src="js/config.js"></script>
    <script src="js/app.js"></script>

    <!--<script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script> -->
    <script src="js/controllers.js"></script>
    <script src="js/loginCtrl.js"></script>
    <script src="js/registerCtrl.js"></script>
    <script src="js/slideCtrl.js"></script>
    <script src="js/detailCtrl.js"></script>
    <script src="js/homeCtrl.js"></script>
    <script src="js/verificationCtrl.js"></script>
    <script src="js/paymentCtrl.js"></script>
    <script src="js/orderpaymentCtrl.js"></script>



</head>

<body ng-app="testapp">
    <ion-nav-view></ion-nav-view>
</body>

</html>

0 个答案:

没有答案