gpt4 book ai didi

javascript - Angular : ng-include, jQuery 无法工作,除非在 HTML 文件中

转载 作者:行者123 更新时间:2023-11-28 05:40:26 27 4
gpt4 key购买 nike

我有一个 ng-include html 文件。当我尝试在 js 文件中使用 jquery 时,它不适用于该 html 文件。当我将脚本包含在 HTML 文件中时,它仍然可以工作。我想知道为什么以及如何使 js 文件中的脚本应用于我的 ng-include HTML 文件。

普朗克: https://plnkr.co/edit/eL3e7vLQqaA0NAMKXBSy?p=preview

警告.html:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(function(){
$(".close").css("background","blue");
$(".close").click(function(){
$(".box").fadeOut(500);
});
});
</script>
<div class="box">
<h2>Hey</h2>
<div class="close">Close</div>
</div>

index.html:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
<script src="jquery.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-include="'warning.html'"></div>
<h1>Hello Plunker!</h1>
</body>

</html>

脚本.js:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

jquery.js

$(function(){
$(".close").css("opacity","0");
$(".close").css("background","blue");
});

最佳答案

ng-include 动态创建 DOM,因此在加载时,您的 jquery 代码已经被执行。一旦 Angular 完成为 warning.html 创建 DOM,您需要执行 jquery 文件内的代码

这是执行此操作的简单方法。 'includeContentLoaded' 在 Angular 加载内容后发出,因此我们可以在其中包含脚本。

app.controller("myCtrl", function($scope, $rootScope,$timeout) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$rootScope.$on('$includeContentLoaded', function() {
$timeout(function(){
load();
});
});

});

你的 jquery.js 看起来像这样

var load = function() {
$(".close").css("opacity", "0");
$(".close").css("background", "blue");
$(".close").click(function() {
$(".box").fadeOut(500);
})

}
load();

现在,您可以从 warning.html 中删除所有脚本

这是 fork

SRC:https://stackoverflow.com/a/22861887/5395350

关于javascript - Angular : ng-include, jQuery 无法工作,除非在 HTML 文件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38960717/

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