javascript - CSS 不适用于 rzslider

Question

rzslider 没有在我的应用程序中列出。但是当我将我的代码复制到编辑器时它的工作完美。 我的代码是:

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>

虽然在在线编辑器中复制此代码有效。但是当我在我的系统中执行相同操作时， slider 没有显示？

Answer 1

您的浏览器控制台显示了什么错误？你看过控制台的网络选项卡了吗？