Инструмент Materializecss не работает с Angularjs

Question

Я недавно начал учиться Angularjs, и я застреваю при реализации materializecsstooltip с угловым охватом.

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 если возможно. Спасибо, парни.

EDIT

К сожалению, здесь мои 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

Я думаю, что проблема в том, что нг-повторить редактирования HTML-кода и нарушает функциональность всплывающей подсказки, вы должны создайте угловую директиву (насколько я знаю). Я не могу дать вам часть кода, чтобы решить это, потому что я использую angular-materialize. У меня была та же проблема, и я решил ее с помощью директивы tooltipped с угловым материализацией (tooltipped directive).

Я знаю, что вы сказали, что не хотите использовать что-то вроде угловатого материализма, но именно так я решил проблему. Я полагаю, вы можете посмотреть код этого плагина, чтобы создать свою собственную директиву.

Извините, что больше не могу вам помочь.

Answer 2

Вам необходимо использовать плагин Angular-materialize, он имеет директивы, которые вы можете использовать, используя угловые и materializecss. Вы можете проверить документацию по подсказке here и не забывайте вводить ui.materialize так:

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

Answer 3

Это может быть сделано без использования углового-материализовать плагин. Попробуйте это в своем контроллере:

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