组件中嵌套指令的 Chrome 中奇怪的 AngularJS 1.5 行为答案

【问题标题】：Odd AngularJS 1.5 behaviour in Chrome of nested directive in component组件中嵌套指令的 Chrome 中奇怪的 AngularJS 1.5 行为
【发布时间】：2017-02-16 10:42:44
【问题描述】：

我有一个创建 Sparkline 的 AngularJS 指令，然后我在几个模块中使用它。该应用在 Firefox (51..) 中的行为符合预期，但是在 Google Chrome 浏览器 (56..) 中查看时，该应用无法提供所需的图形。

请注意，我已经从服务器测试了实际应用程序，这不是跨源请求问题。此外，经检查，控制台没有报错。

这个 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>

非常重要的 Sparkline 指令，感谢 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'
          });
        });
      };
    }
  };
});

【问题讨论】：

标签： jquery angularjs google-chrome sparklines

【解决方案1】：

实际上是使用 jquery 迷你图 2.1.2 版进行排序的。这有一个工具提示问题，我向issue #188提出了这个问题

感谢观看。

【讨论】：