角滑块没有显示
问题描述:
我在我的网站上实现了一个角滑块,我有问题,它没有显示出来。在控制台中没有报告错误。角滑块没有显示
我实现了这种方式:
的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']);
这是什么原因?
答
你需要纠正我们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
进一步注册控制器\服务gservice
,似乎是一些service
,也可以注册到现有模块,如:
angular.module('myapp').service('gservice', function(\\
答
我想你可能已经忘记了链接rzslider.css和UI的自举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中看到我测试代码的实时代码。
您是否包含滑块库JS文件并注入它? – Tushar
@Tushar是的,上面更新了。 – ffritz
@ffritz:你包括'rzModule'模块吗? ,像'angular.module('myapp',['rzModule']);'?,看[fiddle](http://jsfiddle.net/3jjye1cL/) – anoop