AngularJS - slider.noUiSlider ist keine Funktion

Question

Frage Hintergrund:

ich dies zu implementieren bin versucht folgender Bereich Slider (NoUiSlider) in meinem Eckige App:

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

Die Ausgabe :

Ich habe den Code wie erforderlich implementiert, aber mehrere Fehler in der Chrome-Konsole in Bezug auf diesen Schieberegler.

die Konsole Fehler unter der folgenden Quellcode wird gezeigt

Dies ist der Code aus dem Winkel app:

App.js die 'nouislider' dependancy zeigt:

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'); 

Update-Controller, der Scope-Eigenschaften enthält, die sich auf den Schieberegler beziehen:

Update.html Ausblick:

<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 Fehler von der Konsole aus:

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

Zur Zeit bin ich nicht sicher, wie über die Festsetzung der gehen 'slider.noUiSlider ist keine Funktion' Fehler . Ich habe angular in meiner App enthalten und dieser NoUiSlider ist der einzige Teil, der derzeit nicht funktioniert.

Jede Hilfe, die aus diesen Fehlern herausarbeitet, warum der Slider nicht funktioniert, wird sehr geschätzt.

Answer 1

Sie müssen sicher sein, dass Sie zu Ihrem Projekt alle erforderlichen Abhängigkeiten hinzufügen, wie in http://vasyabigi.github.io/angular-nouislider/ angegeben:

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

Ein mein erster Versuch, Ihr Problem in Plunker zu replizieren ich über den gleichen Fehler kam "f.noUiSlider is not a function", bis Ich entschied mich, eine bower install angular-nouislider zu machen und all diese Abhängigkeiten eins nach dem anderen aus dem Ordner bower_components hinzuzufügen. Für einige dieser erforderlichen Dateien, habe ich neue Js Plunker Dateien und kopiert/eingefügt ihren Code direkt dort:

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

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

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

Wie Sie jetzt auf this Plunker test sehen können, erscheinen die Schieberegler und es wird kein Fehler ausgegeben.