Ich habe eine AngularJS Direktive, die eine Sparkline erstellt, die ich dann in ein paar Modulen verwenden. Die App verhält sich wie erwartet in Firefox (51 ..), allerdings sieht die App im Google Chrome Browser (56 ..) nicht die gewünschte Grafik aus.Odd AngularJS 1.5 Verhalten in Chrome verschachtelte Direktive in Komponente
Beachten Sie, dass ich die tatsächliche App von einem Server getestet habe und dies kein Problem mit Cross-Ursprungsanforderungen ist. Außerdem werden bei der Überprüfung keine Fehler auf der Konsole gemeldet.
Diese Plunker reproduziert meine ursprüngliche Frage: https://plnkr.co/edit/K9wO5Ibx1Uk8ygkOUGU6?p=preview
Vielen Dank im Voraus für jede Hilfe.
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="jquery.sparkline.js"></script>
<script src="app.module.js"></script>
<script src="ab-help.module.js"></script>
<script src="ab-help.component.js"></script>
<script src="ab-spkline.directive.js"></script>
</head>
<body ng-app="abMyapp">
<h2>Testing sparkline directive via component in angular </h2>
<p>This is outside the ab-help tags</p>
<spk-line data="30, 1, 14, 10, 8, 15, 6, 13, 2"></spk-line>
<ab-help></ab-help>
</body>
</html>
Die verschiedenen Js Teile unten komprimiert werden:
// Define the 'app' module
angular.module('abMyapp', ['abHelp']); //note in my original app more modules are injected here, example on plunker only shows one!
// Define the `abHelp` module
angular.module('abHelp', []);
// Register `abHelp` component, along with its associated controller and template
angular.
module('abHelp').
component('abHelp', {
templateUrl: 'ab-help.template.html',
controller: function(){
this.myData = "1, 1, 4, 14, 4, 15, 6, 23, 4";
}
});
//template
<p>This is from inside component</p>
<spk-line data="3, 1, 4, 10, 8, 5, 6, 3, 4"></spk-line> <br>
<spk-line data="{{ $ctrl.myData }}"></spk-line>
Die entscheidende Sparkline- Richtlinie mit Dank für http://jsfiddle.net/NAA5G/ und natürlich http://omnipotent.net/jquery.sparkline/#s-about, & JQuery, eckig!
angular.module('abMyapp').directive("spkLine", function() {
return {
restrict: "E",
scope: {
data: "@"
},
compile: function(tElement, tAttrs, transclude) {
tElement.replaceWith("<span>" + tAttrs.data + "</span>");
return function(scope, element, attrs) {
attrs.$observe("data", function(newValue) {
element.html(newValue);
element.sparkline('html', {
type: 'line'
});
});
};
}
};
});