Onsenui 不能与 SVG 进度条一起使用答案

【问题标题】：Onsenui wont work with SVG progress barOnsenui 不能与 SVG 进度条一起使用
【发布时间】：2016-01-20 12:07:14
【问题描述】：

我正在尝试添加一个简单的循环进度图表 (https://github.com/crisbeto/angular-svg-round-progressbar)，但它似乎不适用于 Onsenui。我正在使用 Onsen v1.3.8 - 2015-07-27。

我正确地添加了脚本，并且还在我的模块中添加了“angular-svg-round-progress”...所以真的很难弄清楚出了什么问题...

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

    <script src="components/loader.js"></script>
    <script src="js/roundProgress.min.js"></script>
    <script>
       var app =  ons.bootstrap();
    </script> 
    <script> angular.module('app',  ['onsen','angular-svg-round-progress'])</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/cortisol.js"></script>

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">



</head>
<body>
<ons-page>
    <ons-tabbar position="top"  >
      <ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
      <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
      <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
      <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
      <ons-tabbar-item page="settings.html"  icon="ion-android-settings"></ons-tabbar-item>
    </ons-tabbar>
</ons-page>

</body>
</html>

页面：

<ons-page>
    <ons-toolbar fixed-style>
        <div class="center">Dashboard</div>
    </ons-toolbar>

    <ons-row style="margin-top: 20px; text-align: center;" >
        <ons-col >

        <div
    round-progress
    max="max"
    current="current"
    color="#45ccce"
    bgcolor="#eaeaea"
    radius="100"
    stroke="20"
    semi="true"
    rounded="true"
    clockwise="false"
    responsive="false"
    duration="800"
    animation="easeInOutQuart"
    animation-delay="0"></div>

        </ons-col> 
    </ons-row>
  </ons-page>

【问题讨论】：

标签： onsen-ui monaca

【解决方案1】：

您不会在 app 变量中加载模块，而是在其他一些角度环境中加载模块。

var app =  ons.bootstrap('app',  ['onsen','angular-svg-round-progress']);

应该可以解决问题。这是一个有效的 codepen 脚本：http://codepen.io/anon/pen/PZEmEy.

【讨论】：