Question

我最近开始学习Angularjs并且在使用角度范围实施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指令（据我所知）。我无法给你一段代码来解决这个问题，因为我正在使用angular-materialize。我有同样的问题，我用angular-materialize（tooltipped directive）的tooltipped指令解决了这个问题。

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

抱歉，我无法帮到你。

Answer 2

你需要使用Angular-materialize插件，它有你在使用angular和materializecss时可以使用的指令。您可以查看工具提示here的文档，不要忘记这样注入ui.materialize：

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

Answer 3

这可以在不使用angular-materialize插件的情况下完成。在你的控制器中试试这个：

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

Materializecss工具提示不与Angularjs一起使用

3 个答案: