Question

我面临一个非常奇怪的问题。我关注this tutorial。我的目标是实现两个互相参考的离子视图。

我的问题是，当在浏览器（Firefox）中运行应用程序时，正在调用localhost-address，但没有任何内容呈现给屏幕。控制台输出中也没有错误，甚至没有警告。更奇怪的是，在将相同的代码发布到codepen之后，它确实可以正常工作see here。我机器上代码的唯一区别是对：

的引用

ionic.css
ionic.bundle.js

这些是由我的机器上的离子生成的，适用于其他项目。我在开发中使用Linux（Mint）和Firefox。我将发布我的整个代码，但就像我说的那样，代码集没有区别。

提前致谢！

的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</title>

    <link rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.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>

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

  </head>
  <body ng-app="starter" > 

      <ion-nav-view></ion-nav-view>

         <script id="home.html" type="text/ng-template">
        <ion-view view-title="home">
          <ion-content ng-controller="HomeCtrl">
              <p>Lorem Ipsum bla bla bla…</p>
            <a href="#/setViewer">View my set</a>
          </ion-content>
        </ion-view>
      </script>

       <script id="setViewer.html" type="text/ng-template">
        <ion-view view-title="SetViewer">
          <ion-content ng-controller="SliderCtrl">
                      <p>Lorem Ipsum bla bla bla…</p>
            <a href="#/home">Home</a>
          </ion-content>
        </ion-view>
      </script>

  </body>
</html>

controllers.js：

angular.module('starter',['ionic'])
.controller('SliderCtrl',['$scope',function($scope){
    }])
    .controller('HomeCtrl',['$scope','$state',function($scope,$state){
   }]);

app.js：

angular.module('starter', ['ionic'])

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

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

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

  $stateProvider

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

    .state('setViewer',{
        url:'/setViewer',
        templateUrl: 'setViewer.html',
    controller: 'SlideCtrl'
    });

    $urlRouterProvider.otherwise('/');

});

Answer 1

所以解决方案是我混淆了文件。

正如您在我的codepen .module声明中所看到的，.config和.controller声明发生在一个文档中。与我的本地结构相比，这些结构在app.js和controllers.js之间分开。

一旦我将所有这些声明放在一个文件中，一切正常。

根本不显示离子视图

1 个答案: