rzsliderにCSSが適用されていません

Question

rzsliderが私のアプリに掲載されていません。 私のコードは次のとおりです。私は私のシステムで同じことを行うと、オンラインエディタでそのworks.Butをこのコードをコピーし、スライダーが表示されていないものの

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); 
 
app.controller('MainCtrl', function ($scope) { 
 
var alpha = []; 
 
for(var i=65;i<=90;i++){ 
 
    alpha.push(String.fromCharCode(i)); 
 
} 
 

 
for(var i=65;i<=90;i++){ 
 
    var first = 'A'; 
 
    var next = String.fromCharCode(i); 
 
    alpha.push(first + next); 
 
} 
 
    $scope.alphabet = 1; 
 
    $scope.alphabetMax = alpha.length - 1; 
 
    $scope.alphabetTranslate = function(value) { 
 
    return alpha[value].toUpperCase(); 
 
    }; 
 
    //Slider for class range 
 
    $scope.range_slider_ticks_values = { 
 
     startRange: 1, 
 
     endRange: 12, 
 
     options: {   
 
      stepsArray: 'LKG1,LKG2,class-1,class-2,class-3,class-4,class-5,class-6,class-7,class-8,class-9,class-10,class-11,class-12'.split(','), 
 
      showTicksValues: true 
 
     } 
 
    }; 
 
    $scope.range_slider_batch_values = { 
 
     startRange: 1, 
 
     endRange: 12, 
 
     options: {   
 
      stepsArray: alpha.toString().split(','), 
 
      showTicksValues: true 
 
     } 
 
    }; 
 
    
 
    $scope.$on('slideEnded', function() { 
 
    var startClass, endClass; 
 
    startClass = $scope.range_slider_ticks_values.startRange+1; 
 
    endClass = $scope.range_slider_ticks_values.endRange+1; 
 
    //alert("startClass: " + startClass + " endClass : " + endClass) 
 
    getBatchSliders(startClass, endClass) 
 
    }); 
 
    
 
    $scope.getNumber = function(num,startClass,endClass) { 
 
    return new Array(num); 
 
    } 
 

 
    function getBatchSliders(startClass, endClass) { 
 
    endClass = parseInt(endClass); 
 
    //console.log("startClass: " + startClass + " endClass : " + endClass) 
 
    var totalSlider; 
 

 
    if (startClass === 1 || startClass === 2) { 
 
    //alert("pre class found") 
 
     startClass = startClass; 
 
     endClass = endClass; 
 
     totalSlider = endClass; 
 
    } 
 
    if (startClass >= 3) { 
 
    //alert("pre class not found") 
 
     startClass = startClass-2; 
 
     endClass = endClass-2; 
 
     totalSlider = endClass ; 
 
    } 
 
    $scope.$apply(function() { 
 
    $scope.startClass = startClass; 
 
     $scope.endClass = endClass; 
 
     $scope.totalSliders = totalSlider; 
 
    }) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> 
 
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script> 
 
<div ng-app="rzSliderDemo"> 
 
    <div ng-controller="MainCtrl" class="wrapper"> 
 
      {{range_slider_ticks_values.startRange+1}}  
 
== 
 
      {{range_slider_ticks_values.endRange+1}} 
 
     <article> 
 
      <rzslider rz-slider-model="range_slider_ticks_values.startRange" rz-slider-high="range_slider_ticks_values.endRange" rz-slider-options="range_slider_ticks_values.options"></rzslider> 
 
     </article> 
 
     
 
     Total class {{totalSliders}} 
 
     <br> 
 
     <br> Class start from {{startClass}} to {{endClass}} 
 
     <div ng-if="totalSliders">  
 
     <div ng-repeat="i in getNumber(totalSliders,startClass,endClass) track by $index"> 
 
     <span> 
 
     {{ alphabetTranslate($index) }} 
 
     </span>   
 
     
 

 
<rzslider rz-slider-options="range_slider_batch_values.options" rz-slider-model="$index"></rzslider> 
 

 

 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

？

Answer 1

ブラウザのコンソールにエラーとして表示されたことはありますか？あなたはあなたのコンソールのネットワークタブを見ましたか？