Materializecss 工具提示不适用于 Angularjs答案

【问题标题】：Materializecss tooltip not working with AngularjsMaterializecss 工具提示不适用于 Angularjs
【发布时间】：2016-04-05 15:34:29
【问题描述】：

我最近开始学习 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 显示颜色名称，如果可能的话，我不想使用像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>

【问题讨论】：

您是否链接了jquery 和materialize.js 文件？
@TirthPatel 似乎是这样，我想知道我是否应该将 materialize.js 放在 angular.js 下方

标签： javascript angularjs tooltip materialize web-frontend

【解决方案1】：

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

我知道你说过你不想使用 angular-materialize 之类的东西，但这就是我解决问题的方法。我想您可以查看该插件的代码来制作自己的指令。

对不起，我帮不了你更多。

【讨论】：

【解决方案2】：

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

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

【讨论】：

我使用了 ui.materialize ，现在它显示了工具提示，但它显示在靠近锚标签的屏幕上角

【解决方案3】：

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

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

【讨论】：