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一起工作

回答

相關問題