Question

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

Plunkr： https://plnkr.co/edit/eL3e7vLQqaA0NAMKXBSy?p=preview

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：

<!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：

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

Answer 1

ng-include动态创建DOM，因此在加载时，您的jquery代码已经被执行。一旦angular完成为warning.html

创建DOM，您需要在jquery文件中执行代码

这是一种类似的方法。 'includeContentLoaded'在角度加载内容后发出，因此我们可以在其中包含脚本。

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

Angular：ng-include，jQuery无效，除非在HTML文件中

1 个答案: