HTML内容更新未以离子形式显示

时间:2015-12-24 11:46:11

标签: javascript node.js html5 cordova ionic

我们最近购买了一个ionFullApp模板,我一直在尝试编辑HTML内容,但这些更改并没有显示出来。 我安装了Node.js,cordova和ionic,并按照模板文档中的说明运行了以下命令

npm install -g bower
npm install
bower install
ionic setup sass
ionic serve

索引页面如下所示:

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

    <link href="css/ionic.app.css" rel="stylesheet">
    <link href="lib/ionic-contrib-tinder-cards/ionic.tdcards.css" rel="stylesheet">
    <script src="https://maps.google.com/maps/api/js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/angular-resource/angular-resource.min.js"></script>
    <script src="lib/underscore/underscore-min.js"></script>
    <script src="lib/ngmap/build/scripts/ng-map.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="lib/moment/min/moment.min.js"></script>
    <script src="lib/angular-moment/angular-moment.min.js"></script>
    <script src="lib/angular-slugify/dist/angular-slugify.min.js"></script>
    <script src="lib/collide/collide.js"></script>
    <script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/factories.js"></script>
    <script src="js/views.js"></script>
    <script src="js/config.js"></script>
  </head>
  <body ng-app="your_app_name">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

和其中一个视图页面(workthrough.html)是

<ion-view class="walkthrough-view" cache-view="false">
  <ion-content scroll="false">
    <div class="top-content row">
      <div class="col col-center">
        <img ng-src="img/logo.png">
      </div>
    </div>
    <div class="bottom-content row">
      <div class="col col-center">
        <a class="login button button-block button-stable" ui-sref="auth.login">
          Log In 
        </a>
        <a class="sign-up button button-block button-stable" ui-sref="auth.signup">
          Sign Up
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>

然而,我在视图目录中进行了一些HTML更改,但它没有更新。我有什么问题吗?

请帮助任何身体。 感谢

1 个答案:

答案 0 :(得分:2)

与ionFullApp面临同样的问题。这是ionFullApp使用的真正硬编码模板缓存。 请按照以下步骤删除缓存

  1. 查找gulp-tasks文件夹。打开default.js。注释掉以下行

    $url ="https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=16.538048,80.613266&destinations=23.0225,72.5714";
    
    
    
        $ch = curl_init();
        // Disable SSL verification
    
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        // Will return the response, if false it print the response
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        // Set the url
        curl_setopt($ch, CURLOPT_URL,$url);
        // Execute
        $result=curl_exec($ch);
        // Closing
        curl_close($ch);
    
        $result_array=json_decode($result);
    print_r($result_array);
    
  2. 转到主菜单中的ionic.project文件并对此进行评论

    gulp.watch(paths.templatecache, ['templatecache']);
    
  3. 在www / js文件夹中,打开views.js并将其全部注释

  4. 打开app.js.在依赖项列表中查找"templatecache", 并将其注释掉。

  5. 转到index.html并注释掉对#views; js&#39;的引用。 (为了安全起见)

  6. 如果您使用过任何其他非缓存命令,例如

    'your_app_name.views',

    将其删除。

  7. 您的模板现在应根据您的命令进行编辑。这可能是gulp任务中的一些错误,否则它应该在视图之间缓存您的更改,而不是原始模板。