1

我是 JavaScript 和 AngularJS 的新手。我正在构建一个与建筑管理系统对话的应用程序：它有一个名为“JaceMod”的模块，其中包含一个用于联系 BMS 并从中检索数据的服务。我正在使用 Dygraphs 向图形数据添加功能，并且我创建了一个指令来实例化图形并用数据填充它。

我想将我的 Dygraphs 指令放入一个名为 'dygraphs' 的模块中，在一个单独的文件 'angular-dygraphs.js' 中，这样我以后可以重新使用它，并要求这个模块作为 'JaceMod' 中的依赖项。像这样：

'use strict';
console.log('Loading angular-dygraphs.js');
angular.module('dygraphs', []);

angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
    return {
...etc ...
    };
});

然后是主文件“app.js”：

'use strict';
console.log('Loading app.js');

angular.module('JaceMod', ['dygraphs']);

angular.module('JaceMod').factory('JaceData', function ($http, $timeout) {
    var JaceDataService = {};
...etc ...
    return JaceDataService;
});

angular.module('JaceMod').controller('myCtrl', function myCtrl($scope, JaceData) {
    JaceData.initialise($scope);
    JaceData.subscribe($scope);
});

html 看起来像这样：

<html lang="en" ng-app="JaceMod">
<head>
    <meta charset="utf-8">
    <title>AngularJACE</title>
    <style type="text/css">
        body {font-family:  Trebuchet MS,Helvetica,Arial,sans-serif; }
    </style>
</head>
<body ng-controller="myCtrl">
    <div mrh-dygraph="graphData"
         mrh-dygraph-options="{xlabel: 'Local Time', legend: 'always',
                              showRangeSelector: true, labels: ['Time', 'Outside'],
                              ylabel: 'Temperature (ºC)', height: 420}"
         style="width: 100%; height 420px;"/>
    <script src="dygraph-combined.js"></script>
    <script src="angular.js"></script>
    <script src="angular-dygraphs.js"/>
    <script src="app.js"></script>
</body>

但是当我加载这个 html 时，我看到我的控制台消息“正在加载 angular-dygraphs.js”，然后是一个错误“错误：无模块：JaceMod”。我从来没有在app.js. 如果我切换最后 2 个 javascript 文件的加载顺序，我会看到 app.js 加载并且错误消息是“错误：无模块：dygraphs”。第二个列出的文件似乎永远不会被加载。

如果我将代码从 angular-dygraphs.js 复制到 app.js 中，将指令留在它自己的模块中，它就可以工作。

为什么会这样？不能将模块放在自己的文件中吗？文件没有太大帮助...

编辑添加

html 和 js 文件都在同一个目录中，包括 dygraphs 和 angular 库。我正在从文件加载 html，不涉及服务器。

更新

我将 angular-dygraphs.js 中的所有内容复制到 app.js 中，并注释掉了整个 angular-dygraphs.js：仍然出现问题，app.js 无法加载。

4

1 回答 1

6

您的 angular-dygraphs.js 脚本标签未关闭，因此它永远不会读取 app.js。脚本标签不能自动关闭：

<script src="angular-dygraphs.js"/>

应该

<script src="angular-dygraphs.js"></script>
于 2013-06-19T23:23:13.230 回答