Question

我正在尝试添加一个简单的循环进度表（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>

Answer 1

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

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

应该做的伎俩。这是一个有效的codepen脚本：http://codepen.io/anon/pen/PZEmEy。

Onsenui不会使用SVG进度条

1 个答案: