0
我的角度BIE，並試圖使圖表中的部分，我用一點點動畫顯示的諧音，我的主要工作是爲了顯示我使用的模板，我曾在這個網站http://blacktie.co/2014/07/dashgum-free-dashboard/下載圖表圖表並在我的項目中添加了所有必需的css和js。爲什麼我的圖表沒有加載部分？
事情是我的圖表代碼工作，如果我刪除ng-view後將其放入我的index.html文件中，但如果我刪除代碼並將圖表代碼放在page-tps部分代碼不會加載圖表。
我的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 whic我相信與我的問題無關。
Plunker
這裏是plunker的鏈接http://plnkr.co/edit/ASaasx3laUHYDPfLnsn9?p=preview用戶名是usman和密碼是1122當你點擊頂部的產品銷售就可以看到圖表。但是，當您將相同的TOP產品銷售代碼複製並粘貼到位於<div class="page {{pageClass}}" ng-view></div>處的index.html中時，圖表將會出現
發表您的控制器代碼或創建一個plunker – Sajeetharan
我認爲這個問題是你的圖表期望DOM到那裏頁面加載和你的情況爲JS圖表前，部分加載執行。這就是爲什麼當你把你的部分代碼在您的index.html – atul
所以我應該怎麼辦現在@atul –