AngularJS - slider.noUiSliderは関数ではありません

Question

質問の背景：私が実装しようとしています

この次の私の角度アプリでレンジスライダー（NoUiSlider）：

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

問題：

私はこのコードを必要に応じて実装しましたが、このスライダに関するChromeのコンソールに複数のエラーがあります。 'nouislider' 依存を示す

App.js：

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> 

クロームエラー：私は固定に取り掛かるするかどうかはわかりません現在

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は関数ではありません」 。私は角度が私のアプリに含まれており、この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フォルダから1つずつ追加することに決めました。これらの必要なファイルのいくつかのために、私は新しいの.js Plunkerファイルとそこに直接コピー/貼り付け、コード作成：

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に表示されているように、スライドバーが表示され、エラーはスローされません。