时间戳

首页 > 解决方案 > 缩小后角度 ui-select 中断

angularjs - 缩小后角度 ui-select 中断

问题描述

我目前需要维护一个使用 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 完成的，据我所知，这些是用于缩小代码的步骤：

我找到了一些解决方法，比如降级 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.cssandmain.min.css被打包到我的 dist 中： 缺少 vendor.min.css

还是不知道原因。

标签： angularjsgruntjsminifyangular-ui-select

解决方案

我已经修复了它，但不是很优雅。问题是，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，但我正在谈论的应用程序将在明年停止服务，所以没关系。

推荐阅读