我是一个有角度的bie并试图制作一个局部的图表，我使用一点点动画来显示局部图，我的主要工作是显示图表我正在使用我从这个网站下载的图表模板http://blacktie.co/2014/07/dashgum-free-dashboard/我在项目中添加了所有必需的css和js。
如果我删除ng-view后删除代码并将我的图表代码放在page-tps部分中，如果我将其放在我的index.html文件中，那么我的图表代码确实有效代码不会加载图表。
我的index.html文件看起来像这样
<html ng-app="myApp">
<head>
<title>Point of sale</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="global-wrap">
<div class="page {{pageClass}}" ng-view></div> // if i remove ng-view and place my page-tps code and run my index file the chart does load
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/controllers.js" type="text/javascript"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
</body>
</html>
这是我的部分文件page-tps
<div class="col-md-offset-1 col-md-6 ">
<!--CUSTOM CHART START -->
<div class="border-head">
<h3>VISITS</h3>
</div>
<div class="custom-bar-chart">
<ul class="y-axis">
<li><span>10.000</span></li>
<li><span>8.000</span></li>
<li><span>6.000</span></li>
<li><span>4.000</span></li>
<li><span>2.000</span></li>
<li><span>0</span></li>
</ul>
<div class="bar">
<div class="title">JAN</div>
<div class="value tooltips" data-original-title="8.500" data-toggle="tooltip" data-placement="top">85%</div>
</div>
<div class="bar ">
<div class="title">FEB</div>
<div class="value tooltips" data-original-title="5.000" data-toggle="tooltip" data-placement="top">50%</div>
</div>
<div class="bar ">
<div class="title">MAR</div>
<div class="value tooltips" data-original-title="6.000" data-toggle="tooltip" data-placement="top">60%</div>
</div>
<div class="bar ">
<div class="title">APR</div>
<div class="value tooltips" data-original-title="4.500" data-toggle="tooltip" data-placement="top">45%</div>
</div>
<div class="bar">
<div class="title">MAY</div>
<div class="value tooltips" data-original-title="3.200" data-toggle="tooltip" data-placement="top">32%</div>
</div>
<div class="bar ">
<div class="title">JUN</div>
<div class="value tooltips" data-original-title="6.200" data-toggle="tooltip" data-placement="top">62%</div>
</div>
<div class="bar">
<div class="title">JUL</div>
<div class="value tooltips" data-original-title="7.500" data-toggle="tooltip" data-placement="top">75%</div>
</div>
</div>
<!--custom chart end-->
</div><!-- /row -->
我的controller.js
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var posControllers = angular.module('posControllers', ['ui.bootstrap', 'ngAnimate']);
posControllers.controller('PosController', ['$scope', '$http', '$routeParams', '$location', '$modal', function ($scope, $http, $routeParams, $location, $modal) {
$scope.pageClass = 'page-home';
$scope.submitForm = function (username, password) {
$scope.username = username;
$scope.password = password;
$scope.showUsername = false;
$scope.showPassword = false;
if ($scope.username === 'usman' && $scope.password === '1122')
{
$modal.open({
templateUrl: 'partials/popup.html',
});
$location.path('/admin');
}
else if ($scope.username !== 'usman')
{
$scope.showUsername = true;
}
else if ($scope.password !== '1122')
{
$scope.showPassword = true;
}
};
}]);
posControllers.controller('AdminController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.pageClass = 'page-admin';
}]);
posControllers.controller('TpsController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.pageClass = 'page-tps';
}]);
posControllers.controller('TsController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.pageClass = 'page-ts';
}]);
posControllers.controller('PaController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.pageClass = 'page-pa';
}]);
posControllers.controller('PcController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.pageClass = 'page-pc';
}]);
posControllers.controller('CpController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.pageClass = 'page-cp';
}]);
posControllers.controller('CrController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
$scope.pageClass = 'page-cr';
}]);
另外在这里提一下，我正在使用一些动画，我遵循本教程https://scotch.io/tutorials/animating-angularjs-apps-ngview，我认为这与我的问题无关。
Plunker
以下是plunker http://plnkr.co/edit/ASaasx3laUHYDPfLnsn9?p=preview用户名为usman且密码为1122的链接，当您点击热门产品销售时，您可以看到图表。但是当您在<div class="page {{pageClass}}" ng-view></div>地点的index.html中复制并粘贴TOP产品销售的相同代码时，图表将会出现