Angular ui-select 缩小后中断

Question

我目前需要维护一个使用 angular-ui-select 0.19.8 的 angular.js 1.5 应用程序。我遇到的问题是 ui-select 在打包应用程序时以某种方式中断。当运行grunt serve时，这部分：

<ui-select mandatory-field-marker
     multiple ng-required="true"
     ng-model="some.periods">
   <ui-select-match placeholder="Select some periods...">
     {{$item | period}}
   </ui-select-match>
   <ui-select-choices
        repeat="period in formCtrl.periods">
     <div ng-bind-html="period | highlight: $select.search"></div>
   </ui-select-choices>
</ui-select>

此输出结果：

当运行打包的应用程序时，它看起来像这样：

这不仅仅是样式问题，损坏的输入字段在由于转移到下一个组件而变得不可点击之前不允许超过 10 个元素。

打包是用 grunt 完成的，据我所知，这些是用于缩小代码的步骤：

useminPrepare
concat
ngAnnotate
imagemin
autoprefixer
cssmin
usemin
htmlmin

我找到了一些解决方法，比如降级 ui-select 并将匹配的类添加到 <ui-select> 和 <ui-select-choices> 但 none 他们的工作。

bower 拉取的 ui-select 依赖项似乎已经缩小了：

更新：这似乎是 grunt and/or bower 的问题。重新配置托管网站的 Apache 后，我遇到了错误，即缺少 vendor.min.css。我在（由 bower 生成的）index.html 头部找到了部分：

<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

然而，只有 bootstrap.min.css 和 main.min.css 被打包到我的 dist 中：

还是不知道原因。

Answer 1

我已经修复了它，但不是很优雅。问题是，select.css 和 ng-tags-input.css 没有打包成 vendor.min.css，所以它们在部署后丢失了。我无法确定哪个 grunt-task 应该构建 vendor.min.css，但至少我知道无论谁应该做，都没有。所以在 index.html 中我更改了部分

<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

至

<!-- build:css(.) styles/select.min.css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<!-- endbuild -->
<!-- build:css(.) styles/ng-tags-input.min.css -->
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

现在有效。如果将来 bower_components 中有更多 css 文件，这将是一个问题，但我正在谈论的应用程序将在明年停止服务，所以它不会没关系。

Angular ui-select 缩小后中断

Angular ui-select breaks after minifying

minify

angularjs

gruntjs

angular-ui-select