Materialisecss工具提示不能与Angularjs一起工作

我最近开始学习Angularjs，并且在执行materializecsstooltip时出现角度范围时卡住了。Materialisecss工具提示不能与Angularjs一起工作

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

我已经成功地显示出不同的颜色，但未能表现出与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>

来源

2016-04-05 RyJ

你链接了'jquery'和'materialize.js'文件吗？ –

@TirthPatel似乎是这样的，我不知道我是否应该将materialize.js放在angular.js的下方 – RyJ

我认为这个问题是NG重复编辑HTML代码，并且打破了提示功能，您必须创建一个角度指令（据我所知）。我无法给你一段代码来解决这个问题，因为我正在使用angular-materialize。我遇到了同样的问题，我用角度实现的tooltipped指令（tooltipped directive）解决了这个问题。

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

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

来源

2016-08-30 07:55:59

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

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

来源

2016-10-17 12:22:05 laide

我使用了ui.materialize，现在它显示了工具提示，但它显示在靠近锚标签的insted屏幕的顶部角落 – mchampaneri

这可以在不使用的角度，兑现插件来完成。试试这个在你的控制器：

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

来源

2017-02-03 12:33:47

Materialisecss工具提示不能与Angularjs一起工作

回答

相关问题