9

我最近正在转换一个 AngularJS 应用程序以使用 Browserify，同时，我正在从 Mimosa 切换到 Gulp 作为我的构建系统。

在处理了许多其他小问题之后，我遇到了一些问题：

  1. 使用 ng-switch 和 ng-switch-when 时，我的 index.html 中不断出现以下错误：

    Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

  2. ng-include 对我不起作用（没有错误消息，只是没有包含任何内容，也没有发出网络请求）。

  3. 我的自定义属性之一中的代码从未被调用，即使它显然是我原始 index.html 文件中 HTML 标记的一部分。

我花了很多时间尝试各种事情来查看问题可能是什么，但最终按照我下面的答案中的描述进行了追踪。

4

1 回答 1

13

我的gulpfile.js的一部分使用gulp -minify-html来缩小 HTML。事实证明，默认情况下，gulp-minify-html会从 HTML 中删除空属性。这对于 Angular 应用程序来说显然是致命的。

结果，ng-switch、ng-include 和我的自定义属性被完全从缩小的 HTML 中删除，因此 Angular 错误消息在 ng-switch 案例中完全正确。

为了解决这个问题，我只是更改了我的 gulp 规则以将{empty:true}选项传递给minifyHTML()，这意味着“不要剥离空属性”。我的 gulp 任务现在看起来像这样：

var minifyHTML = require('gulp-minify-html');

gulp.task('htmlmin', function() {
   var htmlSrc = './app/index.html',
   htmlDst = './public/';
   var opts = {empty: true};

   gulp.src(htmlSrc)
      .pipe(changed(htmlDst))
      .pipe(minifyHTML(opts))
      .pipe(gulp.dest(htmlDst));
});

有关其他优化标志的更多信息，请参阅此处的文档。

于 2014-09-17T21:30:01.877 回答