正在尝试设置 ui-select angular 指令以用于我的项目。我在index.html中添加了所需的 CDN 链接，如下所示：
<html ng-app="angulobby">
<head>
<base href="/">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>
<link rel="stylesheet" ng-href="../node_modules/ui-select/dist/select.min.css">
<script type="text/javascript" src="/node_modules/ui-select/dist/select.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">-->
<link rel="stylesheet" type="text/css" href="./stylesheets/style.css">
<link rel="stylesheet" type="text/css" href="./stylesheets/index.css">
</head>
<body>
<div id="container">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AnguLobby Prototype</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="/login"><i class="fa fa-shield"></i> Login</a></li>
<li><a href="/register"><i class="fa fa-comment"></i> Register</a></li>
<div ng-controller="logoutController">
<a ng-click='logout()' class="btn btn-default">Logout</a>
</div>
</ul>
</div>
</nav>
</header>
<div id="ng-view" ng-view></div>
</div>
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="./main.js"></script>
<script src="./services.js"></script>
<script src="./controllers.js"></script>
</body>
</html>
我已经将ui.select模块添加到我的main.jsangulobby 模块中，如下所示：
var app = angular.module('angulobby', ['ngRoute', 'ngSanitize', 'ui.select']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
access: { restricted: true }
})
.when('/login', {
templateUrl: 'pages/login.html',
controller: 'loginController',
access: { restricted: false }
})
.when('/logout', {
controller: 'logoutController',
access: { restricted: true }
})
.when('/register', {
templateUrl: 'pages/register.html',
controller: 'registerController',
access: { restricted: false }
})
.when('/contact', {
templateUrl: 'pages/contact.html',
access: {restricted: true }
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
app.run(function($rootScope, $location, $route, AuthService) {
$rootScope.$on('$routeChangeStart',
function (event, next, current) {
AuthService.getUserStatus()
.then(function(){
if (next.access.restricted && !AuthService.isLoggedIn()){
$location.path('/login');
$route.reload();
}
});
});
});
当我在本地主机上运行项目时，我在 Chrome 控制台中收到以下堆栈跟踪：
Uncaught Error: [$injector:modulerr] Failed to instantiate module angulobby due to:
Error: [$injector:modulerr] Failed to instantiate module ui.select 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.
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=ui.select
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:66:12
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:2262:17
at ensure (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:2183:38)
at module (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:2260:14)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4896:22
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:403:20)
at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4880:5)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4898:40
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:403:20)
at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4880:5)
我已经看了很多例子，但我似乎找不到任何与我的代码不同的主要内容。
感谢您的帮助！
我有一种感觉，你在查看这两行代码时为 select.min 输入了错误的 URL.js：
<link rel="stylesheet" ng-href="../node_modules/ui-select/dist/select.min.css">
<script type="text/javascript" src="/node_modules/ui-select/dist/select.min.js"></script>