Очень простой Появление и исчезновение текста (почти готово)

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 = "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>

Answer 2

ng-app - дважды, добавьте только 1 элемент с директивой ng-app

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>