Materializecss工具提示不适用于Angularjs

Materializecss tooltip not working with Angularjs

本文关键字：Angularjs 适用于 不适用 工具提示 Materializecss      更新时间：2024-01-01

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

我认为问题是ng重复编辑html代码，这会破坏工具提示功能，您必须创建一个角度指令（据我所知）。我不能给你一段代码来解决这个问题，因为我正在使用角度实体化。我也有同样的问题，我用角度实体化的tooltipped指令（工具提示指令）解决了它。

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

对不起，我不能再帮你了。

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

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

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

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