0
私は、角BIEだと部分的にチャートをしようと、私はパーシャルを表示するには、少しのアニメーションを使用しています、私の主な仕事は、私はこのウェブサイトからダウンロードしたチャートのテンプレートを使用していますチャートを表示することですhttp://blacktie.co/2014/07/dashgum-free-dashboard/私はプロジェクトに必要なCSSとjsをすべて追加しました。なぜ私のチャートが部分的に読み込まれていないのですか？
事は、私がng-viewを削除した後、私は私のindex.htmlファイルに入れた場合、私のチャートのコードが作業を行いますが、私はコードを削除し、page-tpsで私のチャートのコードを配置する場合は、部分的なコードは、チャートをロードしません。ここでは、この
<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>
など
私のindex.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です。しかし、<div class="page {{pageClass}}" ng-view></div>の場所にあるindex.htmlのTOP製品販売の同じコードをコピーして貼り付けると、
私は問題はあなたのチャートは、DOMは、ページのロードに、グラフのためのあなたのケースのjsが部分的にロードされた前に実行される中でそこに期待だと思うあなたのコントローラのコードを投稿したりplunker – Sajeetharan
を作成します。それはあなたがあなたのindex.htmlを – atul
にあなたの部分のコードを入れたときに、私は今 –