AngularJS

Question

问题背景：

我正在尝试在我的 Angular 应用程序中实现以下范围滑块 (NoUiSlider)：

http://vasyabigi.github.io/angular-nouislider/

问题：

我已经按照要求实现了代码，但是在 Chrome 的控制台中有多个与此滑块相关的错误。

控制台错误将显示在以下源代码下方

这是来自 Angular 应用程序的代码：

App.js 显示 'nouislider' 依赖关系：

  angular
  .module('app', [
    'ui.router',
    'ui.bootstrap',
    'ngResource',
    'nouislider'
  ])
  .config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {

      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'home.html',
            controller: 'HomeController'
        })
        .state('update', {
            url: '/update',
            templateUrl: 'Update.html',
            controller: 'UpdateController'
        })
      }]);

    var app = angular.module('app');

更新包含与滑块相关的范围属性的控制器：

    app.controller('UpdateController', function ($scope, searchService) {
    $scope.searchingService = searchService;

    $scope.test = { 'single': 0, 'to': 0, 'from': 0 };

    $scope.searchFormUpdate = {};

    $scope.hideSearch = true;

    $scope.search = function () {

        $scope.searchingService.updateSearchList(
          $scope.searchFormUpdate.item,
          $scope.searchFormUpdate.catagory,
          $scope.searchFormUpdate.country);

    }

    $scope.items = [];
    $scope.currentPage = 1,
      $scope.numPerPage = 10,
      $scope.maxSize = 5;

    $scope.$watchCollection('searchingService.searchList', function (newVal, oldVal) {
        $scope.searchingService.searchList = newVal;
        $scope.items = [];

        for (i = 1; i <= $scope.searchingService.searchList.length; i++) {
            $scope.items.push($scope.searchingService.searchList[i]);
        }

        $scope.filterItems();

    })

    $scope.$watch('currentPage + numPerPage', function () {
        $scope.filterItems();
    });

    $scope.filterItems = function () {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage),
          end = begin + $scope.numPerPage;

        $scope.searchingService.filteredItems = $scope.searchingService.searchList.slice(begin, end);
    }  
});

Update.html 查看：

<div ng-controller="UpdateController" ng-show="hideSearch">
    <div class="form-group">
        <div slider ng-model="test.single" start=1 end=10></div>
        <div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5></div>
    </div>
</div>

Chrome 来自控制台的错误：

angular.js:10147 TypeError: slider.noUiSlider is not a function
    at link (http://localhost:55315/Scripts/bower_components/angular-nouislider/src/nouislider.js:63:16)
    at http://localhost:55315/Scripts/bower_components/angular/angular.js:7170:44
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6768:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6158:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at publicLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6051:30) <div slider="" ng-model="test.single" start="1" end="10" class="ng-isolate-scope ng-pristine ng-valid">(anonymous function) @ angular.js:10147

angular.js:10147 TypeError: slider.noUiSlider is not a function
    at link (http://localhost:55315/Scripts/bower_components/angular-nouislider/src/nouislider.js:22:16)
    at http://localhost:55315/Scripts/bower_components/angular/angular.js:7170:44
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6768:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6158:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at publicLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6051:30) <div slider="" ng-from="test.from" ng-to="test.to" start="0" end="100" step="5" class="ng-isolate-scope">

目前我不确定如何修复 'slider.noUiSlider is not a function' 错误。我的应用程序中包含 angular，而这个 NoUiSlider 是目前唯一无法正常工作的部分。

如果您能从这些错误中找出滑块无法工作的原因，我们将不胜感激。

Answer 1

您必须确保将所有必需的依赖项添加到您的项目中，如 http://vasyabigi.github.io/angular-nouislider/:

中所述

<link rel="stylesheet" href="bower_components/nouislider/jquery.nouislider.css" />
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/nouislider/jquery.nouislider.js"></script>
<script src="bower_components/nouislider/Link.js"></script>
<script src="bower_components/angular-nouislider/src/nouislider.js"></script>

我第一次尝试在 Plunker 中复制您的问题时遇到了同样的错误 "f.noUiSlider is not a function"，直到我决定执行 bower install angular-nouislider 并从 bower_components 文件夹。对于其中一些必需的文件，我创建了新的 .js Plunker 文件并直接在其中 copy/pasted 它们的代码：

jqueryslider.js == bower_components/nouislider/jquery.nouislider.js

link.js == bower_components/nouislider/Link.js

nouislider.js == bower_components/angular-nouislider/src/nouislider.js

正如您现在在 this Plunker test 上看到的那样，出现了滑动条并且没有抛出任何错误。

AngularJS - slider.noUiSlider 不是函数

AngularJS - slider.noUiSlider is not a function

javascript

nouislider