不使用Angularjs的材料化工具提示

Question

我最近开始学习Angularjs，并且在实现materializecss tooltip时陷入困境。

<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"
    }
]
}]);

我已经成功地显示了不同的颜色，但没有显示colorName与tooltip，我不想使用额外的插件，如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-重复编辑html代码，这破坏了工具提示功能，您必须创建一个角指令(据我所知)。我不能给您一段代码来解决这个问题，因为我使用的是角物化。我有同样的问题，我解决了它的tooltipped指令角物化(刀尖指令)。

我知道你说过你不想用棱角物化之类的东西，但这就是我解决问题的方法。我想你可以看看那个插件的代码来做你自己的指令。

抱歉，我不能再帮你了。

Answer 2

您需要使用角物化插件，它有您可以使用的指令，当使用角度和材质。您可以检查工具提示这里的文档，并且不要忘记像这样注入ui.materialize：

var app = angular.module('tooltipApp', ['ui.materialize'])

Answer 3

这可以不使用角物化插件。在你的控制器里试试这个：

$('.color-picker').tooltip().tooltip('show');
$(document).ready(function () {
    $('.tooltipped').tooltip({ delay: 50 });
});