javascript - TypeError: $element.epoch is not a function -
i'm using angularjs , epoch ng-epoch directive wrapper. here module file
angular.module('rdash', ['ui.bootstrap', 'ui.router', 'ngcookies','ng-oboe','ng.epoch']) .config(function (oboeprovider) { /* if inclined, change oboe defaults here - headers, etc. */ // oboeprovider.defaults = {}; }); i didn't make changes in controller. because want show chart outline without data @ page.
here template file:
<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> also here index
<!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"> </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> why getting error? can't figure out.
typeerror: $element.epoch not function @ h.$scope.renderepoch (http://localhost:4444/lib/js/main.min.js:434:28) @ livelinefunction (http://localhost:4444/lib/js/main.min.js:504:28) @ http://localhost:4444/lib/js/main.min.js:65:60 @ k (http://localhost:4444/lib/js/main.min.js:55:142) @ g (http://localhost:4444/lib/js/main.min.js:47:397) @ http://localhost:4444/lib/js/main.min.js:47:17 @ http://localhost:4444/lib/js/main.min.js:48:359 @ w (http://localhost:4444/lib/js/main.min.js:52:291) @ za.link (http://localhost:4444/lib/js/main.min.js:206:239) @ 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="">
as per preparation section here, need load jquery first , epoch.js below.
if not have jquery , angularjs included:
<script src="[path_to_bower_compnents]/jquery/dist/jquery.min.js"></script> <script src="[path_to_bower_compnents]/angular/angular.min.js"></script> after load 2 libraries, include:
<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>
Comments
Post a Comment