根本不显示离子视图

Question

I am facing a really weird issue. 我面临一个非常奇怪的问题。 I was following this tutorial . 我正在学习本教程。 My goal was to implement two ion-view's which have a reference to each other. 我的目标是实现两个彼此参考的离子视图。

My problem is that when running the app in the browser (Firefox) the localhost-address is being called but nothing is rendered to the screen. 我的问题是，当在浏览器（Firefox）中运行应用程序时，正在调用localhost-address，但没有任何内容呈现给屏幕。 There are also no errors, not even warnings in the console output. 控制台输出中也没有错误，甚至没有警告。 What is even more weird is that after posting the very same code to codepen it does work without problems, see here . 更奇怪的是，在将完全相同的代码发布到codepen后，它确实可以正常工作，请参阅此处。 The only difference to the code on my machine are the references to: 我机器上代码的唯一区别是对以下内容的引用：

ionic.css
ionic.bundle.js

Those are generated by ionic on my machine and work fine for other projects. 这些是由我的机器上的离子生成的，适用于其他项目。 I am using Linux (Mint) and Firefox in developement. 我在开发中使用Linux（Mint）和Firefox。 I will post my entire code but like I said there are no differences to the codepen. 我会发布我的整个代码，但就像我说的那样，对于codepen没有任何区别。

Thanks in advance! 提前致谢！

index.html: 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: controllers.js：

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

app.js: 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

So the solution was that I mixed up the files. 所以解决方案是我混淆了文件。

As you can see in my codepen .module declaration, .config and .controller declarations took place in a single document. 正如你可以在我的codepen看到.module声明.config和.controller声明发生了一个单一的文件内。 Compared to my local structure where those were separated between app.js and controllers.js . 与我的本地结构相比，它们在app.js和controllers.js之间分开。

Once I put all those declarations in a single file everything worked fine. 一旦我将所有这些声明放在一个文件中，一切正常。

根本不显示离子视图

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-11-10 10:21:12

根本不显示离子视图

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-11-10 10:21:12

解决方案1
2 已采纳 2016-11-10 10:21:12