角度滑块未显示答案

【问题标题】：Angular Slider not showing角度滑块未显示
【发布时间】：2017-11-03 13:00:03
【问题描述】：

我在我的网站上实现了一个角度滑块，但我遇到了它没有显示的问题。控制台没有报错。

我是这样实现的：

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

还有控制器：

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

我的 app.js：

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

这可能是什么原因？

【问题讨论】：

滑块库JS文件是否包含并注入？
@Tushar 是的，我在上面更新了。
@ffritz：你是否包含了rzModule 模块？，如angular.module('myapp', ['rzModule']);？，请参阅fiddle
@anoop 它包含在我的 app.js 中，如上所述。它是否也必须包含在控制器本身的依赖项中？ --编辑：是的。谢谢！ :)
你的控制器没问题。你可能没有包括正确的东西。检查这个演示小提琴，看看你是否错过了什么jsfiddle.net/ValentinH/954eve2L

标签： javascript angularjs

【解决方案1】：

您需要更正我们的module declaration和注册方式controller\service\factory.

在上面的代码中，删除空依赖[]，否则它将创建新模块。重用现有的声明模块，如：

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

并从模块依赖数组中删除ctrl, gservice。例如：

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

作为，您可以使用现有模块myapp注册Controller\service

进一步gservice，好像是一些service，也可以注册到现有模块中。，like：

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

【讨论】：

【解决方案2】：

我想你可能忘记链接 rzslider.css 和 ui-bootstrap-tpls.js。您可能还需要在 HTML 中定义 ng-app。 <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>

您可能会在 jsfiddle 中看到我测试过您的代码的实时代码。

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

【讨论】：