Angular Slider nicht angezeigt

Ich habe einen eckigen Schieberegler auf meiner Website implementiert, und ich habe das Problem, dass es nicht angezeigt wird. In der Konsole werden keine Fehler gemeldet.Angular Slider nicht angezeigt

ich es auf diese Weise umgesetzt:

index.html

<script src="/../bower_components/angular/angular.js"></script> 
    <script src="/../bower_components/angularjs- 
     slider/dist/rzslider.min.js"></script> 
    ... 
    <body ng-controller="ctrl"> 
    <div class="container"> 
    <div class="col-md-9"> 
    <p>Date Range:</p><br> 
      <rzslider class="custom-slider" 
      rz-slider-model="dateSlider.minValue" 
      rz-slider-high="dateSlider.maxValue" 
      rz-slider-options="dateSlider.options"></rzslider> 
    ...

und der Steuerung:

angular.module('myapp', []).controller('ctrl', 
function($scope, $http, $rootScope, gservice){ 
$scope.dateSlider = { 
     minValue: '1', 
     maxValue: '4', 
     options: { 
      stepsArray: [1, 2, 3, 4] 
     } 
    }; 
    }

Mein app.js:

var app = angular.module('myapp', ['ctrl', 'gservice', 'rzModule']);

Was könnte die Ursache dafür sein?

Quelle

2017-06-02 ffritz

Haben gehören Sie den Schieberegler Bibliothek JS-Datei und injiziert es? – Tushar

@Tushar Ja, ich tat, aktualisiert oben. – ffritz

@ffritz: Haben Sie das Modul 'rzModule' eingeschlossen? , wie 'angular.module ('myapp', ['rzModule']);'?, siehe die [fiddle] ( – anoop

Sie benötigen unsere module declaration und die Art und Weise zu korrigieren controller\service\factory.

Im obigen Code zu registrieren, entfernen Sie leere Abhängigkeit [], sonst wird es neues Modul erstellen. Wiederverwendung der vorhandenen erklärt Modul wie:

angular.module('myapp').controller('ctrl', 
function($scope, $http, $rootScope, gservice){ 
$scope.dateSlider = { 
     minValue: '1', 
     maxValue: '4', 
     options: { 
      stepsArray: [1, 2, 3, 4] 
     } 
    }; 
    },

und entfernen ctrl, gservice aus Modulabhängigkeits Array, wie:.

var app = angular.module('myapp', ['rzModule']);

wie können Sie Regler \ Dienst mit vorhandenen Modul myapp

weiter registrierengservice, scheint einige service zu sein und kann auch zu vorhandenen Modul registriert werden., Wie:

angular.module('myapp').service('gservice', function(\\

Quelle

2017-06-02 07:56:29 anoop

Ich glaube, Sie rzslider.css und ui-Bootstrap-tpls.js verlinkt vergessen haben. Sie müssen möglicherweise auch die ng-App in Ihrem HTML definieren. <link rel='stylesheet' href='https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>

Sie können die Live-Code in jsfiddle sehen, dass ich Ihren Code getestet.

https://jsfiddle.net/abhijd88/2eupcen8/6/

Quelle

2017-06-02 09:13:19

Angular Slider nicht angezeigt

Antwort

Verwandte Themen