非常基本的出现和消失文本（几乎完成）答案

【问题标题】：Very basic Appear and dissapear text (Almost done)非常基本的出现和消失文本（几乎完成）
【发布时间】：2018-11-21 11:41:41
【问题描述】：

谁能解释一下为什么第一个有效而另一个无效？我需要在表格 td 中闪烁文本

有什么帮助吗？

var blink = angular.module('blink', [])
.directive('blink', function($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope, $element) {
            function showElement() {
                $element.css("display", "inline");
                $timeout(hideElement, 1000);
            }

            function hideElement() {
                $element.css("display", "none");
                $timeout(showElement, 1000);
            }
            showElement();
        },
        template: '<span ng-transclude></span>',
        replace: true
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="blink">
<blink><b>Works</b></blink>
</div>

<div ng-app="blink">
<blink><b>Doesn't. WHY?</b></blink>
</div>

【问题讨论】：

您只需初始化一次ng-app。确保两个指令都包含在其中。如果你初始化它两次，你会遇到角引导问题
眨眼2018？？根据文档：此功能已过时。尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。
如果您删除第二个初始化 ng-app，您的代码将起作用。
改用marquee。
每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。

标签： javascript angularjs

【解决方案1】：

ng-app 是两次，使用 ng-app 指令只添加 1 个元素

var blink = angular.module('blink', [])
  .directive('blink', function($timeout) {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        function showElement() {
          $element.css("display", "inline");
          $timeout(hideElement, 1000);
        }

        function hideElement() {
          $element.css("display", "none");
          $timeout(showElement, 1000);
        }
        showElement();
      },
      template: '<span ng-transclude></span>',
      replace: true
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="blink">
  <table style="width:100%">
    <tr>
      <td>
        <blink><b>Works</b></blink>
      </td>
      <td>
        <blink><b>Doesn't. WHY?</b></blink>
      </td>
    </tr>
  </table>
</div>

【讨论】：

我需要一个 TD！！
完成，请批准答案

【解决方案2】：

瞧，你复制了 ng-app="blink"

var blink = angular.module('blink', [])
.directive('blink', function($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope, $element) {
            function showElement() {
                $element.css("display", "inline");
                $timeout(hideElement, 1000);
            }

            function hideElement() {
                $element.css("display", "none");
                $timeout(showElement, 1000);
            }
            showElement();
        },
        template: '<td><span ng-transclude></span></td>',
        replace: true
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="blink">
 <table style="width:100%">
  <tr>
   <blink><b>Works</b></blink>
   <blink><b>Doesn't. WHY?</b></blink>
  </tr>
 </table>
</div>

【讨论】：