ui-select 加载错误 "Module 'ui.select' is not available! You either misspelled the module name or forgot to load it."

ui-select with error loading "Module 'ui.select' is not available! You either misspelled the module name or forgot to load it."

我尝试在我的解决方案中使用 ui-select 指令。我在我的解决方案中添加了关于 ui-select 的整个 Github 文件夹。我还在 app.js 中注入了 'ui.select'。但是当我运行解决的时候,F12出现如下错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module MetronicApp due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyLoad due to:
Error: [$injector:nomod] Module 'ui.select' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

在主 index.html 文件中使用脚本标签正确包含下载的文件路径,并确保在 app.js 文件中正确注入依赖项:

angular.module('myModule', ['ui.select']);

(或)

其他方法是使用包管理器:

您可以使用 npm 或 bower 安装

npm install ui-select

bower install angular-ui-select

并确保您正确注入了依赖项

angular.module('myModule', ['ui.select']);

尝试使用 CDN 而不是直接包含文件。

对于 css:[https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.css]

对于 js :[https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.js] 在您的 index.html 主页面中包含关于标签,您无需下载文件并包含它们,CDN 将提供文件。

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.17.1/select.js" async></script>

在app.js中:

angular.module('myapp', ['ui.select', 'ngSanitize']);

Requirements for ui.select:

  • Angular >=1.2.18
  • ngSanitize 模块
  • jQuery(旧浏览器支持可选)
  • 从 Internet Explorer 8 和 Firefox 3.6 开始的浏览器兼容性。
  • Bootstrap/Select2/Selectize CSS 视情况而定

检查你的 bower 文件。

如果 angularjs-ui-select 不可用,请将此行添加到您的 bower.json 文件

"angular-ui-select": "~0.18.1"

"version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.5.3",
    "angular-cookies": "~1.5.3",
    "angular-touch": "~1.5.3",
    "angular-sanitize": "~1.5.3",
    "angular-messages": "~1.5.3",
    "angular-aria": "~1.5.3",
    "jquery": "~2.1.4",
    "angular-resource": "~1.5.3",
    "angular-route": "~1.5.3",
    "bootstrap-sass": "~3.3.5",
    "angular-bootstrap": "~0.14.3",
    "malarkey": "yuanqing/malarkey#~1.3.1",
    "angular-toastr": "~1.5.0",
    "moment": "~2.10.6",
    "animate.css": "~3.4.0",
    "angular": "~1.5.3",
    "angular-daterangepicker": "^0.2.2",
    "angular-ui-select": "~0.18.1"
  },
  "devDependencies": {
    "angular-mocks": "~1.5.3"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  },
  "resolutions": {
    "jquery": "~2.1.4",
    "angular": "~1.5.3"
  }
}