使用 ng-transclude 从我指令的 HTML 模板执行两次脚本标记

Question

我有一个指令将从 CMS 获取的一些 HTML 转入我的 AngularJS 应用程序。当我将脚本标记添加到我的指令中并向其添加控制台消息时，该消息被记录了两次。

这是我的指令：

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" 记录了两次。

谁能解释为什么会这样？

Answer 1

答案是第一次关于 document.load <script>...</script> 运行你的指令，它根本不取决于你的指令。

第二次加载你的指令，所以你有两次控制台。

如果您想检查使用$timeout延迟加载您的模板：

open your browser console

        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");
        }
    };

使用 ng-transclude 从我指令的 HTML 模板执行两次脚本标记

Script tag executed twice from HTML template of my directive using ng-transclude

angularjs

angularjs-ng-transclude