Question

尝试设置ui-select angular directive以用于我的项目。我在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.js angulobby模块中，如下所示：

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();
        }
      });
  });
});

当我在localhost上运行项目时，我在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)

我看过很多examples，但我似乎找不到任何与我的代码不同的重大内容。

感谢您的帮助！

Answer 1

我感觉你在查看代码的这两行时为select.min.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>

角度ui.select模块不可用？

1 个答案: