如何让角度js中的百分比进度圈工作？

问题描述：

我已经下载了node.js和角度js。这里提到https://www.npmjs.com/package/angular-percent-circle-directive 如何让角度js中的百分比进度圈工作？

新增角JS脚本和百分比的圆指令脚本这里是我的html代码 -

<!DOCTYPE html> 
<html> 
<head> 
<title>My dashboard</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<link rel="stylesheet" type="text/css" href="C:\Users\Shantanu\node_modules\angular-percent-circle-directive\dist\percent-circle.css"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="css/main.css"> 

</head> 
<body> 
<script src="C:\Users\Shantanu\node_modules\angular-percent-circle- 
directive\dist\percent-circle-directive.js" type="text/javascript"></script> 
<script type="text/javascript" src="ang.js"></script> 
<script 
src="https://code.jquery.com/jquery-3.2.1.js" 
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
crossorigin="anonymous"></script> 
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384- 
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"></script> 

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="container"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data- 
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- 
expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <img src="vx-medium.jpg"><a class="navbar-brand" href="#"><strong> 
VenturX: Prototype</strong></a> 
</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#"><strong>Hello, [email protected]</strong></a></li> 
    <li><a href="login.html">Log out</a></li> 

    </ul> 
</div> 
</div><!-- /.navbar-collapse --> 
</div><!-- /.container-fluid --> 
</nav> 
<div class="img"> 
<img src="person_male.jpg" class="person"> 
</div> 
<div id="content"> 
<table> 
    <tr> 
     <td><strong>Market</strong></td> 
     <td class="tc">Fill in who are your customers?</td> 
    </tr> 
    <tr> 
     <td><strong>Pain</strong></td> 
     <td class="tc">What is the pain statement you are trying to solve 
for them?</td> 
    </tr> 
    <tr> 
     <td><strong>Benefit</strong></td> 
     <td class="tc">What is the benefit that will match that pain 
statement?</td> 
     <td class="editpro"><a class="btn btn-default" href="#" 
role="button">Edit Profile</a></td> 
    </tr> 
</table> 
</div> 
<div class="title"> 
<span class="bigf">How is <strong>VenturX <span class="glyphicon glyphicon- 
pencil" aria-hidden="true"></strong> doing today?</span></span><span 
class="checkd"> Check dashboard</span> 
</div> 
<percent-circle percent=50 class="cir">HighS</percent-circle> 
<!-- 
<p class="bg-warning"><strong>Small conversion?</strong> Learn what you can 
do to <strong><span class="bl">rise your conversion</span></strong>.</p> 
<p class="bg-danger"><strong>Low product score?<span class="bl"> Try 
this</span></strong> to get more ...</p> 
--></body> 
</html>

我的百分之圈是不工作的。我试图增加圆的宽度和高度，但它仍然不能工作。它的完整空白。里面的文字显示出来，但圈子没有出现。问题在哪里？

_My百分比根本不工作_...控制台中是否有任何错误？你有没有尝试任何基本的调试？ – Jax

控制台中没有错误。 –

答

script src="C:\Users\Shantanu\node_modules\angular-percent-circle-directive\dist\percent-circle-directive.js" type="text/javascript"

你这里这个剧本，我还没有测试它是否可以包含这种方式，但据知，这是不正确的战争做，作为角项目符合时，它会收集您的src/app目录中的所有内容。

如果您正在使用NPM安装它，您可以使用它在角：

const package-name = require('package-name');

，并使用需要，也请按照下列步骤操作：

运行npm i --save-dev @types/node
在你里面app.modules.ts，写下行：declare let require: any;。
最后，在你的tsconfig.app.json文件，写入

{ “扩展”： “../tsconfig.json","compilerOptions ”：{“ 类型 ”：“ 节点”]， “typeRoots”：[“../node_modules/@types”]}}

然后从导入的包中包含脚本文件。

我是新来的角js。我只是做了什么在这里 - https://www.npmjs.com/package/angular-percent-circle-directive –

这不是一个问题，按照我给的步骤，你很好去 –

答

所有我必须做的就是添加

<script type="text/javascript"> 
 
\t \t var app = angular.module('percentCircleDemo', ['percentCircle-directive']); 
 
\t </script>

，并添加

<body ng-app="percentCircleDemo">

我没有早点知道跑角的js我们需要在html代码中的某处提到ng-app。

如何让角度js中的百分比进度圈工作？

相关推荐