TypeError:$element.epoch不是函数

TypeError: $element.epoch is not a function

本文关键字:函数 epoch element TypeError      更新时间:2023-09-26

我使用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="">

根据这里的准备部分,您需要先加载jQuery,然后像下面这样加载划时代.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>