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

Question

有人可以解释一下为什么第一个有效而另一个无效吗？我需要在表格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>

Answer 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>

Answer 2

Voila，您复制了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>