0
나는 Sparkline을 생성하는 AngularJS 지시문을 가지고 있으며, 다음 두 개의 모듈 내에서 사용합니다. 앱은 Firefox (51 ..)에서 예상대로 작동하지만 Google 크롬 브라우저 (56 ..)에서 볼 때 앱에서 원하는 그래픽을 제공하지 못합니다.구성 요소의 중첩 된 지시문의 Chrome에서 Odd AngularJS 1.5 동작
서버에서 실제 응용 프로그램을 테스트했으며 이것은 교차 출하 요청 문제가 아니라는 점에 유의하십시오. 또한 검사시 콘솔에 오류가보고되지 않습니다. 어떤 도움을 사전에 https://plnkr.co/edit/K9wO5Ibx1Uk8ygkOUGU6?p=preview
감사 :
이 plunker 내 원래 문제를 재현합니다. 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>
부분이 아래 압축 다양한 의 .js
:
// 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>
http://jsfiddle.net/NAA5G/에 대한 물론 http://omnipotent.net/jquery.sparkline/#s-about의 감사를 가진 모든 중요한 스파크 지침, & JQuery, 각도!
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'
});
});
};
}
};
});