我正在将AngularJS和Epoch与ng-epoch指令包装一起使用。
这是我的模块文件
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe','ng.epoch'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
我没有对控制器进行任何更改。因为我只想在页面上显示没有数据的图表轮廓。
这是我的模板文件：
<div class="row" ng-controller="StatsCtrl">
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-line-chart" title="Cpu">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<epoch-live-line chart-height="200" chart-data="" chart-stream=""> </epoch-live-line>
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-area-chart" title="Memory">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
</rd-widget-body>
</rd-widget>
</div>
</div>
这也是我的索引
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RDash AngularJS</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<link rel="stylesheet" type="text/css" href="components/epoch/epoch.min.css" />
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="components/oboe/dist/oboe-browser.min.js"></script>
<script type="text/javascript" src="components/ng-oboe/dist/ng-oboe.js"></script>
<script type="text/javascript" src="components/d3/d3.min.js"></script>
<script type="text/javascript" src="components/epoch/epoch.min.js"></script>
<script type="text/javascript" src="components/ng-epoch/ng-epoch.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
<a href="#">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
</li>
<li class="sidebar-list">
<a href="#/tables">Tables <span class="menu-icon fa fa-table"></span></a>
</li>
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
<a href="#">Server Down!</a>
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Home / Dashboard
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
为什么我会收到此错误？我不知道。
TypeError: $element.epoch is not a function
at h.$scope.renderEpoch (http://localhost:4444/lib/js/main.min.js:434:28)
at liveLineFunction (http://localhost:4444/lib/js/main.min.js:504:28)
at http://localhost:4444/lib/js/main.min.js:65:60
at K (http://localhost:4444/lib/js/main.min.js:55:142)
at g (http://localhost:4444/lib/js/main.min.js:47:397)
at http://localhost:4444/lib/js/main.min.js:47:17
at http://localhost:4444/lib/js/main.min.js:48:359
at w (http://localhost:4444/lib/js/main.min.js:52:291)
at za.link (http://localhost:4444/lib/js/main.min.js:206:239)
at K (http://localhost:4444/lib/js/main.min.js:55:142) <div class="epoch ng-scope ng-isolate-scope" chart-height="200" chart-data="" chart-stream="">
最佳答案
按照准备部分here，您需要先加载jQuery，然后再加载epoch.js，如下所示。
如果尚未包含jQuery和AngularJS：
<script src="[PATH_TO_BOWER_COMPNENTS]/jquery/dist/jquery.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/angular/angular.min.js"></script>
加载这两个库之后，包括：
<script src="[PATH_TO_BOWER_COMPNENTS]/d3/d3.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/epoch/epoch.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/ng-epoch/ng-epoch.js"></script>
关于javascript - TypeError:$ element.epoch不是一个函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34659659/