Question

问题背景：

我正在尝试在我的Angular应用程序中实现以下Range Slider（NoUiSlider）：

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

问题：

我已根据需要实施了代码，但Chrome控制台中有与此滑块相关的多个错误。

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

下方

这是Angular app的代码：

App.js显示＆＃39; nouislider＆＃39;扶养：

  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">

目前我不确定如何修复＆＃39; slider.noUiSlider不是一个功能＆＃39;错误。我的角度包含在我的应用程序中，这个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并从{{1}逐个添加所有这些依赖项}文件夹。对于其中一些必需的文件，我创建了新的.js Plunker文件，并直接在那里复制/粘贴代码：

bower_components == jqueryslider.js

bower_components/nouislider/jquery.nouislider.js == link.js

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

正如您现在可以在 this Plunker test 上看到的那样，会出现滑动条并且不会引发任何错误。

AngularJS - slider.noUiSlider不是函数

1 个答案: