Тег скрипта, выполненный дважды из шаблона HTML моей директивы с помощью ng-transclude - PullRequest
Новая
       66

Тег скрипта, выполненный дважды из шаблона HTML моей директивы с помощью ng-transclude

1 голос
/ 14 мая 2019

У меня есть директива, которая преобразует некоторый HTML, извлеченный из CMS, в мое приложение AngularJS. Когда я добавляю тег script в свою директиву и добавляю консольное сообщение, это сообщение регистрируется дважды.

Вот моя директива: 

angular.module('my-directive', [])
  .directive('myDirective', function () {
    return {
      restrict: 'E',
      replace: false,
      transclude: true,
      template: '<section class="my-directive" ng-transclude> 
         </section>'
    };
  });

Я использую это как: 

<my-directive>
  <script>
    console.log("ABCD");
  </script>
</my-directive>

Ожидаемый результат: «ABCD» зарегистрирован один раз.

Фактический результат: "ABCD" зарегистрировано дважды.

Может кто-нибудь объяснить, почему это происходит?

1 Ответ

2 голосов
/ 14 мая 2019

Ответ в первый раз на document.load <script>...</script> истекает из вашей директивы, это не зависит от вашей директивы вообще.

и во второй раз ваша директива загружена, поэтому у вас есть две консоли.

Если вы хотите проверить, используйте $timeout для загрузки вашего шаблона с задержкой:

открыть консоль браузера 

        return {
            restrict: 'E',
            replace: false,
            transclude: true,
            template: '<section ng-transclude ng-if="run"></section>',
            link: function (scope) {
                $timeout(function () {
                    scope.run = true
                }, 2000)
            }
        };

Как решить этот вопрос?

Вам не нужно script в директиве! и если вы хотите настроить скрипт для каждой директивы, это другой вопрос.

Поместите ваш скрипт на link в вашей директиве: 

    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<section ng-transclude ng-if="run"></section>',
        link: function (scope) {
            //----your scripts
            console.log("ABCD");
        }
    };
...