javascript - Materializecss 工具提示不适用于 Angularjs

Question

我最近开始学习 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>

Answer 1

我认为问题是 ng-repeat 编辑 html 代码并且破坏了工具提示功能，您必须创建一个 Angular Directive(指令)(据我所知)。我无法给你一段代码来解决这个问题，因为我正在使用 angular-materialize 。我遇到了同样的问题，我用 Angular-Materialize 的 tooltipped 指令解决了它( tooltipped directive )。

我知道你说过你不想使用像 Angular-Materialize 这样的东西，但这就是我解决问题的方法。我想你可以查看该插件的代码来制定你自己的指令。

抱歉，我无法为您提供更多帮助。