Javascript 如何避免使用angularJS创建元素？

我有一个

元素，我只想在用户单击按钮时创建它。作为angular的新手，我只是将其放在页面中，并将

ng if

指令绑定元素的存在添加到模型中的某个布尔值中。它的工作原理与预期的一样，只是在页面完全加载和角度运行之前的短暂时刻，创建了元素。事实上，我可以在浏览器的F12工具中看到加载帧的传出请求

只有在用户请求时才创建元素的正确角度方法是什么？我意识到我可以改变框架的

src

，但不知道是否有更优雅的解决方案

以下是完整的页面代码：

点击

var bomberApp=angular.module（'bomberApp'，[]）；
bomberApp.controller（“MooCtrl”，函数（$scope）{
$scope.showFrame=函数（）{
$scope.show=！$scope.show；
}
});

问题来自页面的呈现顺序： 您的iframe位于加载角度的

标记之前

继续，利用

区域加载脚本，您会发现，一旦在iFrame之前加载Angular，它将不会显示：

var bomberApp=angular.module（'bomberApp'，[]）；
bomberApp.controller（“MooCtrl”，函数（$scope）{
$scope.showFrame=函数（）{
$scope.show=！$scope.show；
}
});
让我赚大钱

问题来自页面的呈现顺序： 您的iframe位于加载角度的

标记之前

继续，利用

区域加载脚本，您会发现，一旦在iFrame之前加载Angular，它将不会显示：

var bomberApp=angular.module（'bomberApp'，[]）；
bomberApp.controller（“MooCtrl”，函数（$scope）{
$scope.showFrame=函数（）{
$scope.show=！$scope.show；
}
});
让我赚大钱

只要使用普通JavaScript DOM函数单击按钮，就可以生成自定义指令并创建iframe

角度模块（'testApp'，[]） .directive（'generateFrame'，function（）{ 返回{ 限制：'E'， 模板：“{vm.message}}
”， 范围：{ src:“@” }, 控制器：功能（$scope）{ var vm=这个； vm.src=$scope.src； vm.iframeCreated=false； vm.message='Create'； vm.create=function（）{ var iframeContainer=document.getElementById（'iframe-container'）； 如果（！vm.iframeCreated）{ var iframe=document.createElement（'iframe'）； iframe.src=vm.src； iframe.class='some class'；//如果需要设置样式，请添加它 iframe.id='created iframe'； iframeContainer.appendChild（iframe）； vm.iframeCreated=true； vm.message='Remove'； }否则{ var-iframe=document.getElementById（'created-iframe'）； iframeContainer.removeChild（iframe）； vm.iframeCreated=false； vm.message='Create'； } } }, controllerAs:'vm' } });

---

只要使用普通JavaScript DOM函数单击按钮，就可以生成自定义指令并创建iframe

角度模块（'testApp'，[]） .directive（'generateFrame'，function（）{ 返回{ 限制：'E'， 模板：“{vm.message}}
”， 范围：{ src:“@” }, 控制器：功能（$scope）{ var vm=这个； vm.src=$scope.src； vm.iframeCreated=false； vm.message='Create'； vm.create=function（）{ var iframeContainer=document.getElementById（'iframe-container'）； 如果（！vm.iframeCreated）{ var iframe=document.createElement（'iframe'）； iframe.src=vm.src； iframe.class='some class'；//如果需要设置样式，请添加它 iframe.id='created iframe'； iframeContainer.appendChild（iframe）； vm.iframeCreated=true； vm.message='Remove'； }否则{ var-iframe=document.getElementById（'created-iframe'）； iframeContainer.removeChild（iframe）； vm.iframeCreated=false； vm.message='Create'； } } }, controllerAs:'vm' } });

---

你知道ng src的事吗？谢谢，我不知道。我现在就用它。有没有办法不完全创建元素？我认为

ng-

指令是不够的，因为在angular解析页面之前，浏览器必须阻塞并且不显示它们。你知道

ng src

吗？谢谢，我不知道。我现在就用它。有没有办法不完全创建元素？我认为，

ng-

指令是不够的，因为在angular解析页面之前，浏览器必须阻塞并且不显示它们。这仍然不能解决不需要的请求，而且它已经内置了：据我所知，要正确使用NgClope，我需要在

中引用angular.js。否则，它不会注入适当的样式来隐藏隐藏的内容。带有控制器代码的脚本可以转到

的底部。如果我错了，请纠正我。到目前为止，我的解决方案是在帧中使用

ngsrc

来避免请求，并使用

ngclope

来避免闪烁。谢谢这仍然不能解决不需要的请求，而且它已经内置了：据我所知，要正确使用ngclope，我需要在

中引用angular.js。否则，它不会注入适当的样式来隐藏隐藏的内容。带有控制器代码的脚本可以进入

 angular.module('testApp', [])
    .directive('generateIframe', function() {
      return {
        restrict: 'E',
        template: '<div><button ng-click="vm.create()">{{vm.message}}</button><br><div id="iframe-container"></div></div>',
        scope: {
          src: '@'
        },
        controller: function($scope) {
          var vm = this;
          vm.src = $scope.src;
          vm.iframeCreated = false;
          vm.message = 'Create';

          vm.create = function() {
            var iframeContainer = document.getElementById('iframe-container');
            if (!vm.iframeCreated) {
              var iframe = document.createElement('iframe');
              iframe.src = vm.src;
              iframe.class = 'some-class'; // add it if you need to style it
              iframe.id = 'created-iframe';
              iframeContainer.appendChild(iframe);
              vm.iframeCreated = true;
              vm.message = 'Remove';
            } else {
              var iframe = document.getElementById('created-iframe');
              iframeContainer.removeChild(iframe);
              vm.iframeCreated = false;
              vm.message = 'Create';
            }
          }
        },
        controllerAs: 'vm'
      }
    });