缩小后角度 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>，但它们都不起作用。

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

---

更新：这似乎是 grunt 和/或 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-files，但我正在谈论的应用程序将在明年停止服务，所以没关系。