我最近开始学习 Angularjs
,但在使用 Angular 范围实现 materializecss
tooltip
时陷入困境。
HTML
<div class="color-picker">
<div class="item" ng-repeat="color in colors">
<div class="color tooltipped" data-position="bottom" data-tooltip="color.colorName" ng-style="{'background-color': color.hexValue}"></div>
</div>
</div>
这是颜色数据:
app.controller('mainController', ['$scope', function($scope){
$scope.colors =
[
{
colorName: "red",
hexValue: "#f00"
},
{
colorName: "green",
hexValue: "#0f0"
},
{
colorName: "blue",
hexValue: "#00f"
},
{
colorName: "cyan",
hexValue: "#0ff"
},
{
colorName: "magenta",
hexValue: "#f0f"
},
{
colorName: "yellow",
hexValue: "#ff0"
},
{
colorName: "black",
hexValue: "#000"
},
{
colorName: "white",
hexValue: "#fff"
}
]
}]);
我已成功显示不同的颜色,但未能使用 tooltip
显示 colorName,并且如果可能的话,我不想使用额外的插件,例如 angular-materialize
。谢谢大家。
编辑
抱歉,这是我的 js 文件:
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/main-controller.js"></script>
最佳答案
我认为问题是 ng-repeat 编辑 html 代码并且破坏了工具提示功能,您必须创建一个 Angular Directive(指令)(据我所知)。我无法给你一段代码来解决这个问题,因为我正在使用 angular-materialize 。我遇到了同样的问题,我用 Angular-Materialize 的 tooltipped
指令解决了它( tooltipped directive )。
我知道你说过你不想使用像 Angular-Materialize 这样的东西,但这就是我解决问题的方法。我想你可以查看该插件的代码来制定你自己的指令。
抱歉,我无法为您提供更多帮助。
关于javascript - Materializecss 工具提示不适用于 Angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36430872/