Fatal编程技术网
  • javascript/
  • Javascript Ionic：路由在创建新视图时提供空白页

Javascript Ionic：路由在创建新视图时提供空白页

javascript angularjs ionic-framework

Javascript Ionic：路由在创建新视图时提供空白页,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我刚刚用爱奥尼亚启动了一个新的应用程序。我的其他视图运行良好，但在创建新视图后，因为我跳入路由，我只看到一个空白页，我没有犯错误 这是我的index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=n

我刚刚用爱奥尼亚启动了一个新的应用程序。我的其他视图运行良好，但在创建新视图后，因为我跳入路由，我只看到一个空白页，我没有犯错误

这是我的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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/font-awesome.css" rel="stylesheet">
    <link href="css/vtabs.css" rel="stylesheet">
    <link href="css/style.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="cordova.js"></script>

    <script src="js/ng-map.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="lib/ngstorage/ngStorage.js"></script>

    <script src="js/geocode.js"></script>

    <script src="js/vtabs.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/services.js"></script>

    <script src="js/angular-local-storage.js"></script>
    <script src="js/angular-local-storage.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-messages.min.js"></script>  

  <!--  <script type="text/javascript">
         var pictureSource;   // picture source
         var destinationType; // sets the format of returned value

         // Wait for device API libraries to load
         //
         document.addEventListener("deviceready",onDeviceReady,false);

         // device APIs are available
         //
         function onDeviceReady() { 
          // alert("device");
            pictureSource=navigator.camera.PictureSourceType;
            destinationType=navigator.camera.DestinationType;
         }

         // Called when a photo is successfully retrieved
         //
           function onPhotoDataSuccess(imageData) {
            alert("image"+imageData);
            // Uncomment to view the base64-encoded image data
           // console.log(imageData);
            alert("photoData");
           // Get image handle
           // //
           var smallImage = document.getElementById('smallImage');


           // Unhide image elements
           //
           smallImage.style.display = 'block';

           // Show the captured photo
           // The in-line CSS rules are used to resize the image
           //
           smallImage.src = "data:image/jpeg;base64," + imageData;
           // alert(smallImage);
           // alert(smallImage.src);
           // return smallImage.src;
         }

         // Called when a photo is successfully retrieved
         //
           function  onPhotoURISuccess(imageURI) {
            alert("Photo uri");
              // Uncomment to view the image file URI
              // console.log(imageURI);

              // Get image handle
              // //
              var largeImage = document.getElementById('largeImage');

              // Unhide image elements
              //
              largeImage.style.display = 'block';

              // Show the captured photo
              // The in-line CSS rules are used to resize the image
              //
              largeImage.src = imageURI;
          }

          // A button will call this function
          //
            function capturePhoto() {
              alert("Capture Photo");
              // Take picture using device camera and retrieve image as base64-encoded string
              navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,

              destinationType: destinationType.DATA_URL });
          }

          // A button will call this function
          //
            function capturePhotoEdit()  {

              alert("Capture Edit");
            // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
              destinationType: destinationType.DATA_URL });
          }

          // A button will call this function
          //
         function getPhoto(source) {
          alert(source);
          alert("get Phot");
            // Retrieve image file location from specified source
            navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
              destinationType: destinationType.FILE_URI,
              sourceType: source });
          }

          // Called if something bad happens.
          //
            function onFail(message) {
            alert('Failed because: ' + message);
          }
    </script>  -->
  </head>
  <body ng-app="ionicApp">

    <!--
      The nav bar that will be updated as we navigate between views.
    -->
  <!--   <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar> -->
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->

    <ion-nav-view animation="slide-left-right"></ion-nav-view> 
    <!-- <ion-nav-view></ion-nav-view> -->
  </body>
</html>
这是ma app.js文件：

    // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('ionicApp', ['ionic', 'ionicApp.controllers','ionicApp.directives', 'ionicApp.services','LocalStorageModule','ngAnimate', 'vTabs','ngCordova','ngMap','geolocate','ngStorage'])


.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider,localStorageServiceProvider) {

  $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

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

  .state('login', {
      url: "/login",
      templateUrl: "templates/login.html",
      controller: 'LoginCtrl'
    })
  .state('setting', {
      parent: 'app',
      url: '^/setting',
      views: {
        'menuContent': {
      templateUrl: "templates/setting.html",
      controller: 'SettingCtrl'
         }
       }
    })

    .state('app.tasks', {
      url: '/tasks',
      views: {
        'menuContent': {
          templateUrl: 'templates/tasks.html',
          controller: 'TasksCtrl'
        }

      }
    })

    .state('app.task', {
      url: '/task/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/task.html',
          controller: 'TaskCtrl'
        }
      }

      // views: {
      // 'menuContent': {
      //   templateUrl: 'templates/task.html',
      //   controller: 'TaskCtrl'
      // },
      // 'detail': {
      //   templateUrl: 'report-table.html',
      //   controller: function($scope){ console.log("... controller stuff just for detail view ..."); }
      // },
      // 'note': {
      //   templateUrl: 'report-graph.html',
      //   controller: function($scope){ console.log("... controller stuff just for note view ..."); }
      // }
    // }

    })

    .state('app.newtask',{
      url:'/newtask',
      views: {

          templateUrl: 'templates/newTask.html',
          controller: 'newTaskCtrl'
      }
    })
    .state('app.project', {
      url: '/project',
      views: {
        'menuContent': {
          templateUrl: 'templates/project.html',
          controller: 'projectCtrl'
        }

      }
    })
    .state('app.saleOrder',{
      url:'/saleOrder',
      views:{
        templateUrl:'templates/saleOrder.html',
        controller:'saleOrderCtrl'
      }
    })

     .state('app.maps', {
      url: '/maps',
      views: {
        'menuContent': {
          templateUrl: 'templates/maps.html',
          controller: 'MapsCtrl'
        }
      }
    })

     .state('app.map', {
      url: '/map/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/maps.html',
          controller: 'MapsCtrl'
        }
      }
    })

    .state('app.direction', {
      url: '/direction/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/directions.html',
          controller: 'NavigationCtrl'
        }
      }
    }) 

     .state('app.customers', {
      url: '/customers',
      views: {
        'menuContent': {
          templateUrl: 'templates/customers.html',
          controller: 'CustomersCtrl'
        }
      }
    })

      .state('app.customer', {
      url: '/customer/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/customer.html',
          controller: 'CustomerCtrl'
        }
      }
    })

    .state('app.quotations', {
      url: '/quotations',
      views: {
        'menuContent': {
          templateUrl: 'templates/quotations.html',
          controller: 'QuotationsCtrl'
        }
      }
    })

    .state('app.quotation', {
      url: '/quotation/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/quotation.html',
          controller: 'QuotationCtrl'
        }
      }
    })

     .state('app.addquotation', {
      url: '/addquotation',
      views: {
        'menuContent': {
          templateUrl: 'templates/AddQuotation.html',
          controller: 'AddQuotationCtrl'
        }
      }
    })


    .state('app.products', {
      url: '/products',
      views: {
        'menuContent': {
          templateUrl: 'templates/products.html',
          controller: 'ProductsCtrl'
        }
      }
    })

 .state('app.product', {
      url: '/product/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/product.html',
          controller: 'ProductCtrl'
        }
      }
    })

    .state('app.user', {
      url: '/user/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/user.html',
          controller: 'UserCtrl'
        }
      }
    })

    .state('app.note', {
      url: '/note/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/note.html',
          controller: 'AddNoteCtrl'
        }
      }
    })

      .state('app.material', {
      url: '/material',
      views: {
        'menuContent': {
          templateUrl: 'templates/AddMaterial.html',
          controller: 'AddMaterialCtrl'
        }
      }
    })
    .state('app.login-into-menucontent', {
      url: "/login-into-menucontent",
      views: {
        'menuContent' :{
          templateUrl: "templates/login.html",
          controller: 'LoginCtrl'
        }
      }
    });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');

  localStorageServiceProvider
    .setPrefix('odoo')
    .setStorageType('localStorage')
    .setNotify(true, true)

});

//Ionic Starter应用程序
//angular.module是创建、注册和检索angular模块的全局位置
//“starter”是此角度模块示例的名称（也在index.html中的属性中设置）
//第二个参数是“requires”的数组
angular.module（'Ionicap'，['ionic'，'ionicApp.Controller'，'ionicApp.Directions'，'ionicApp.services'，'LocalStorageModule'，'ngAnimate'，'vTabs'，'ngCordova'，'ngMap'，'geolocate'，'ngStorage']））
.run（函数（$ionicPlatform）{
$ionicPlatform.ready（函数（）{
//默认情况下隐藏附件栏（删除此选项可在键盘上方显示附件栏）
//表格输入）
if（window.cordova&&window.cordova.plugins.Keyboard）{
插件键盘hideKeyboardAccessoryBar（真）；
}
如果（窗口状态栏）{
StatusBar.styleDefault（）；
}
});
})
.config（函数（$stateProvider、$urlRouterProvider、localStorageServiceProvider）{
$stateProvider
.state（'应用程序'{
url:“/app”，
摘要：没错，
templateUrl:“templates/menu.html”，
控制器：“AppCtrl”
})
.州（“注册”{
url:“/注册”，
templateUrl:“templates/registration.html”，
控制器：'RegisterCtrl'
})
.state（'登录'{
url:“/login”，
templateUrl:“templates/login.html”，
控制器：“LoginCtrl”
})
.state（'设置'{
父项：“应用程序”，
url:“^/设置”，
观点：{
“菜单内容”：{
templateUrl:“templates/setting.html”，
控制器：“设置Ctrl”
}
}
})
.state（'应用程序任务'{
url:“/tasks”，
观点：{
“菜单内容”：{
templateUrl:'templates/tasks.html'，
控制器：“TasksCtrl”
}
}
})
.state（'app.task'{
url:“/task/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/task.html'，
控制器：“TaskCtrl”
}
}
//观点：{
//“菜单内容”：{
//templateUrl:'templates/task.html'，
//控制器：“TaskCtrl”
// },
//“细节”：{
//templateUrl:'report table.html'，
//控制器：函数（$scope）{console.log（“…控制器内容仅用于详细视图…”）；}
// },
//‘注’：{
//templateUrl:“report graph.html”，
//控制器：函数（$scope）{console.log（“…控制器内容仅用于注释视图…”）；}
// }
// }
})
.state（'app.newtask'{
url:“/newtask”，
观点：{
templateUrl:'templates/newTask.html'，
控制器：“newTaskCtrl”
}
})
.state（'app.project'{
url:“/project”，
观点：{
“菜单内容”：{
templateUrl:'templates/project.html'，
控制器：“projectCtrl”
}
}
})
.state（'app.saleOrder'{
url:“/saleOrder”，
观点：{
templateUrl:'templates/saleOrder.html'，
控制器：'saleOrderCtrl'
}
})
.state（'app.maps'{
url:“/maps”，
观点：{
“菜单内容”：{
templateUrl:'templates/maps.html'，
控制器：“MapsCtrl”
}
}
})
.state（'app.map'{
url:“/map/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/maps.html'，
控制器：“MapsCtrl”
}
}
})
.state（'app.direction'{
url:“/direction/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/directions.html'，
控制器：“NavigationCtrl”
}
}
}) 
.state（'应用程序客户'{
url:“/customers”，
观点：{
“菜单内容”：{
templateUrl:'templates/customers.html'，
控制器：“CustomerCtrl”
}
}
})
.state（'app.customer'{
url:“/customer/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/customer.html'，
控制器：“CustomerCtrl”
}
}
})
.state（'应用程序报价'{
url:“/QUOTES”，
观点：{
“菜单内容”：{
templateUrl:'templates/Quotences.html'，
控制器：“QuotationsCtrl”
}
}
})
.state（'应用程序报价'{
url:“/QUOTE/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/Quotence.html'，
控制器：“QuotationCtrl”
}
}
})
.state（'app.addquote'{
url:“/addquote”，
观点：{
“菜单内容”：{
templateUrl:'templates/AddQuotence.html'，
控制器：“AddQuotationCtrl”
}
}
})
.state（“应用程序产品”{
url:“/products”，
观点：{
“菜单内容”：{
templateUrl:'templates/products.html'，
控制器：“ProductsCtrl”
}
}
})
.state（'应用程序产品'{
url:“/product/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/product.html'，
控制器：“ProductCtrl”
}
}
})
.state（'app.user'{
url:“/user/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/user.html'，
控制器：“UserCtrl”
}
}
})
.state（'app.note'{
url:“/note/：id”，
观点：{
“菜单内容”：{
templateUrl:'templates/note.html'，
控制器：“AddNoteCtrl”
}
}
})
.state（'应用程序材料'{
url:“/material”，

<ion-view view-title="Setting">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
     <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
   </ion-nav-bar>

        <ion-content>
            <ion-list class="list">

                <ion-item class="item item-icon-right"  href="#/app/project">
                    <i class="icon ion-edit"></i>
                    Add Project
                </ion-item>
                <ion-item class="item item-icon-right" href="#/app/project">
                    <i class="icon-remove-sign"></i>
                    Delete Project
                </ion-item>

            </ion-list>
        </ion-content>
</ion-view>



<ion-view view-title="New task">
<ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
    <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
     <!--  <ion-nav-buttons side="right" >
        <button class="button button-icon fa fa-map-marker"  ui-sref="app.maps">
        </button>
      </ion-nav-buttons>  -->  
</ion-nav-bar>
<ion-content >
<div ng-controller="newTaskCtrl">
<form name="newTaskForm" novalidate="true">
      <label class="item item-input ">
         <span class="input-label">Task Name</span>
    </label>
    <input type="text" name="tasknm" ng-model="user.tasknm"></input>
    <!-- <h1>{{user.tasknm}}</h1> -->
    <label class="item item-input item-select item-light">
        <span class="input-label">Employee</span>

      <select ng-model="user.selectedItem" ng-options="item.name for item in users">
      <option value="">Add New Employee</option>
      </select>
    </label>
       <input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_category" ng-show="!user.selectedItem" type="text" placeholder="new employee name">
    <label class="item item-input item-select item-light">
          <div class="input-label">Customer</div>
          <select ng-model="user.id" ng-options="s as s.name for s in customer" ng-change="changeCust(customer.name)">
            <option value="">Add New Company</option>
          </select>
    </label>
    <input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_company" ng-show="!user.id" type="text" placeholder="new employee name">
    <button class="button button-calm" ng-disabled="newTaskForm.$invalid" ng-click="save(newTaskForm.$valid)">Save</button>
    <button class="button button-stable" ng-click="cancel()">Cancel
    </button>
</form>
</div>
</ion-content>
</ion-view>



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