Question

我目前正在Angular应用中实现一个滑块。我正在使用这个：https://github.com/angular-slider/angularjs-slider

我已经实现了js文件（版本2.8.0），css文件，在我的app（rzModule）中注册了模块，我正在尝试，只显示一个滑块：<rzslider rz-slider-model="ctrl.priceSlider"></rzslider>。

滑块不显示。相反，我得到"rzSliderTpl.html" not found。我无法弄清楚我做错了什么。 html文件不在那里，但它应该是。模板将添加到文件末尾的模板缓存中（请参阅https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/2.8.0/rzslider.js）。

那么，我可能做错了什么？

Answer 1

根据Git存储库，rzslider指令 - line 1690 - 它需要一个模板html。

src文件夹包含模板：rzSliderTpl.html。下载模板或创建自己的模板后，它应该可以正常工作。

Answer 2

您的代码中必定存在某些内容（可能是其他任何包含的模块？）干扰了templatecache，使用Angular 1.5.0和该滑块的2.8.0版本的一个非常基本的例子非常有效：

angular.module('App', [
    'rzModule'
]);

angular.module('App').controller('Controller', [
    function () {
        this.value = 10;
    }
]);

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angularjs-slider/2.8.0/rzslider.css" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angularjs-slider/2.8.0/rzslider.js"></script>
    </head>
    <body ng-controller="Controller as ctrl">
        <rzslider rz-slider-model="ctrl.value"></rzslider>
    </body>
</html>

Answer 3

如果您没有使用CDN，请将rzSliderTpl.html从src文件夹复制到您选择的文件夹中。

然后，修改rzslider.js的第1690行以指向您的rzSliderTpl.html副本

templateUrl: function(elem, attrs) {
  //noinspection JSUnresolvedVariable
  return attrs.rzSliderTplUrl || /path/to/folder/rzSliderTpl.html';
},

在Angular中包含指令 - 缺少模板？

3 个答案: