奇怪的AngularJS 1.5行爲嵌套指令中的Chrome組件

我有一個AngularJS指令，創建一個Sparkline，然後我在一些模塊中使用。該應用在Firefox（51 ..）中的行爲與預期相同，但在Google Chrome瀏覽器（56 ..）中查看時，該應用無法提供所需的圖形。奇怪的AngularJS 1.5行爲嵌套指令中的Chrome組件

請注意，我已經從服務器測試了實際的應用程序，這不是一個Cross來源請求問題。此外，經檢查，控制檯上不會報告錯誤。

這plunker再現了我原來的問題：https://plnkr.co/edit/K9wO5Ibx1Uk8ygkOUGU6?p=preview

感謝您的任何援助。

的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！

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' 
      }); 
     }); 
     }; 
    } 
    }; 
});

來源

2017-02-16 tuRmerix

實際上通過使用jquery sparkline的版本2.1.2進行排序。這有一個工具提示問題，我已經提出了issue #188

謝謝你看看。

來源

2017-03-03 13:28:52 tuRmerix

奇怪的AngularJS 1.5行爲嵌套指令中的Chrome組件

回答

相關問題