ТипError: $ element.epoch не является функцией

Я использую 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="">

источник

2016-01-07 Erol Guzoğlu

Вы можете включить код, который показывает, как вы в том числе ' epoch.js' и 'ng-epoch.js' на вашей странице html? В идеале 'epoch.js' должен быть первым, а затем' ng-epoch.js' – Arkantos

@Arkantos hey !, я добавил шаблон индекса к моему вопросу. –

Вы не включили jQuery, необходимый для плагина эпохи. – dfsq

Согласно секции подготовки 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>

источник

2016-01-07 16:17:56 Arkantos

ТипError: $ element.epoch не является функцией

ответ

Смежные вопросы