Question

我已经完成了一些Angular项目，但对节点来说有点新意。我有一个自定义指令，显示有关数据的摘要统计信息<summary-stats></summary-stats>。当我使用Gulp和Browser Sync开发前端时，该指令工作正常，但是当我构建所有文件并运行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构建任务没有将模板插入分发文件夹。通过放置一个包含我的HTML文件的static文件夹，并使用Gulp将其构建到我的分发文件夹中，解决了这个问题。

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

1 个答案: