如何获得在 Angular js 中工作的百分比进度圈？答案

【问题标题】：How to get percentage progress circles working in angular js?如何获得在 Angular js 中工作的百分比进度圈？
【发布时间】：2018-03-18 23:55:04
【问题描述】：

我已经下载了 node.js 和 angular js。

添加了 angular js 脚本和 percent-circle-directive 脚本，如此处所述https://www.npmjs.com/package/angular-percent-circle-directive

这是我的 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, 16@test.com</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>

我的百分比圈根本不起作用。我试过增加圆圈的宽度和高度，但它仍然不起作用。它完全空白。它里面的文字出现了，但圆圈没有出现。问题出在哪里？

【问题讨论】：

我的百分比圈完全不起作用...控制台中是否有任何错误？你有没有尝试过任何基本的调试？
控制台没有错误。

标签： html angularjs node.js

【解决方案1】：

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

你这里的这个脚本，我没有测试它是否可以这样包含，但据了解，这不是正确的战争，因为编译时的角度项目，它会从你的src/app 目录。

如果你使用 npm 安装它，你可以通过 Angular 使用它：

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

要使用 require，请按照以下步骤操作：

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

{"extends": "../tsconfig.json","compilerOptions": {"types": ["node"], "typeRoots": ["../node_modules/@types" ] }}

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

【讨论】：

我是 Angular js 的新手。我只是做了这里给出的 - npmjs.com/package/angular-percent-circle-directive
没问题，按照我给出的步骤，你就可以开始了

【解决方案2】：

我所要做的就是添加

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

并添加

&lt;body ng-app="percentCircleDemo"&gt;

我之前不知道要运行 Angular js，我们需要在 html 代码中的某处提及 ng-app。

【讨论】：