Angular：ng-include，jQuery不能工作，除非在HTML文件中 [英] Angular: ng-include, jQuery not working unless in HTML file
问题描述
我有一个 ng-include html文件。当我尝试在我的js文件中使用 jquery 时，它不适用于该html文件。当我将脚本包含在HTML文件中时，它可以工作。我想知道为什么以及如何让我的脚本在我的js文件中适用于我的 ng-include HTML文件。
I have a a ng-include html file. When I try to use jquery in my js file, it doesn't apply to that html file. When I include the script in the HTML file it works though. I was wondering why and how I can make my scripts in my js file apply to my ng-include HTML file.
Plunkr：
https://plnkr.co/edit/eL3e7vLQqaA0NAMKXBSy?p=preview
Warning.html：
Warning.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：
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>
Script.js：
Script.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文件中的代码。
ng-include creates the DOM dynamically, so by the time its loaded, your jquery code has already been executed. You need to execute the code inside the jquery file once angular has finished creating the DOM for warning.html
以下是这样做的一个简单方法。 'includeContentLoaded'是在角度加载内容后发出的，因此我们可以在其中包含脚本。
Here is a simle way of doing this. 'includeContentLoaded' is emitted after angular loads content, so we can include scripts inside that.
app.controller("myCtrl", function($scope, $rootScope,$timeout) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$rootScope.$on('$includeContentLoaded', function() {
$timeout(function(){
load();
});
});
});
您的jquery.js看起来像这样
Your jquery.js would look something like this
var load = function() {
$(".close").css("opacity", "0");
$(".close").css("background", "blue");
$(".close").click(function() {
$(".box").fadeOut(500);
})
}
load();
现在，您可以从warning.html中移除所有脚本
Now, you can remove all the scripts from warning.html
Heres a 分叉
SRC： https://stackoverflow.com/a/22861887/5395350
这篇关于Angular：ng-include，jQuery不能工作，除非在HTML文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
