gpt4 book ai didi

javascript - 如何避免使用 angularJS 创建元素?

转载 作者:行者123 更新时间:2023-11-30 07:57:58 25 4
gpt4 key购买 nike

我有一个 <iframe>我只想在用户单击按钮时创建的元素。作为 Angular 的新手,我只是将它放入页面并添加了 ng-if指令绑定(bind)元素存在到我模型中的某个 bool 值。它按预期工作,除了在页面完全加载和 Angular 运行之前的短暂时刻创建元素。事实上,我可以在浏览器的 F12 工具中看到加载框架的传出请求。

根据用户请求创建元素的正确 Angular 方法是什么?我意识到我可以改变框架的 src , 但想知道是否有更优雅的解决方案。

这是完整的页面代码:

<!doctype html>
<html>
<body ng-app="bomberApp" ng-controller="MooCtrl">
<button ng-click="showFrame()">Click!</button><br>
<iframe src="//xkcd.com" ng-if="show" ng-init="show=false"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script>
var bomberApp = angular.module('bomberApp', []);
bomberApp.controller("MooCtrl", function($scope) {
$scope.showFrame = function(){
$scope.show = !$scope.show;
}
});
</script>
</body>
</html>

最佳答案

问题来自于页面的渲染顺序:你的 iframe 在 <script> 之前加载 Angular 的标签!

继续,利用您的 <head>加载脚本的区域,你会发现一旦在iFrame之前加载Angular,它就不会显示:

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script>
var bomberApp = angular.module('bomberApp', []);
bomberApp.controller("MooCtrl", function($scope) {
$scope.showFrame = function() {
$scope.show = !$scope.show;
}
});
</script>
</head>

<body ng-app="bomberApp" ng-controller="MooCtrl">
<button ng-click="showFrame()">Show me the Money!</button>
<br>
<iframe src="//xkcd.com" ng-if="show" ng-init="show=false"></iframe>
</body>

</html>

关于javascript - 如何避免使用 angularJS 创建元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35323533/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com