Question

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

我是这样实现的：

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

这可能是什么原因？

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

as，您可以使用现有模块myapp

注册Controller \ service

进一步 gservice，似乎是某些service，也可以注册到现有模块。，例如：

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

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

角度滑块未显示

2 个答案: