Materializecss Tooltip funktioniert nicht mit Angularjs

Question

Ich habe vor kurzem angefangen zu lernen Angularjs und ich stecke bei der Implementierung materializecsstooltip mit Winkelbereich stecken.

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> 

und hier sind Farbdaten:

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

Ich habe zeigen erfolgreich verschiedene Farben, aber nicht mit colorname tooltip zeigen, und ich will nicht verwenden, extra Plugin wie angular-materialize wenn möglich. Danke Leute.

EDIT

Sorry, hier ist meine js Dateien:

<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

ich glaube, das Problem ist, dass ng-repeat bearbeiten den HTML-Code und bricht die Tooltip-Funktionalität, müssen Sie erstelle eine Winkelanweisung (soweit ich weiß). Ich kann dir keinen Code geben, um das zu lösen, weil ich angular-materialize verwende. Ich hatte das gleiche Problem und löste es mit der tooltipped Direktive von angular-materialize (tooltipped directive).

Ich weiß, du hast gesagt, dass du nicht so etwas wie eckig-materialisieren willst, aber so habe ich das Problem gelöst. Ich nehme an, du kannst den Code dieses Plugins ansehen, um deine eigene Direktive zu erstellen.

Sorry ich kann dir nicht mehr helfen.

Answer 2

Sie müssen das Angular-materialize Plugin verwenden, es hat Anweisungen, die Sie verwenden können, wenn Sie eckige und materialisecss verwenden. Sie können für den Tooltip here die Dokumentation prüfen und nicht vergessen ui.materialize wie so zu injizieren:

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

Answer 3

Dies kann ohne die Verwendung des Winkel materialisieren Plugin erfolgen. Versuchen Sie dies in Ihrem Controller:

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