带有模板的自定义 Angular 指令不会在节点中 运行

Question

我已经完成了一些 Angular 个项目，但对节点有点陌生。我有一个显示有关数据的汇总统计信息的自定义指令，<summary-stats></summary-stats>。当我使用 Gulp 和浏览器同步开发前端时，该指令工作正常，但是当我构建所有文件和 运行 node server.js 时，我的自定义指令导致浏览器滞后出去。我相信这是由于在指令中包含 templateUrl。

我需要做些什么来包含 templateUrl 指定的模板，以便该节点提供 HTML 文件吗？

这是我的指令：

app.directive('summaryStats', function(scatterService) {
    return {
        restrict: 'A',
        templateUrl: 'app/components/summaryStats/summaryStats.html',
        link: function(scope, el, attr) {

            function update(data) {
                scope.lowCost = data.xMin;
                scope.highCost = data.xMax;
                scope.avgCost = data.avgCost;
                scope.lowTime = data.yMin;
                scope.highTime = data.yMax;
                scope.avgTime = data.avgTime;
                scope.topTechs = data.topTechs;
            }

            scope.$watch(function() { return scatterService.getModel(); }, function(newVal) {
                update(newVal);
            }, true);
        }
    };
});

这是我的 server.js 文件：

var express = require('express');
var path = require('path');
var morgan = require('morgan');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var fs = require('fs');

var app = express();
app.use(function(req, res, next) {
  req.headers['if-none-match'] = 'no-match-for-this';
  next();    
});

app.use(express.static(path.join(__dirname, '/dist')));
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(methodOverride());

app.get('*', function(req, res) {
  res.sendfile('./dist/index.html');
});

app.listen(8080);
console.log("App listening on port 8080");

Answer 1

我的问题是我的 Gulp 构建任务没有将模板插入分发文件夹。通过放置一个 static 文件夹来解决这个问题，该文件夹包含我的 HTML 文件，并使用 Gulp.

将其构建到我的分发文件夹中