Angular: Ng-include, Jquery Not Working Unless In Html File

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 wo

Solution 1:

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

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

});

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();

Now, you can remove all the scripts from warning.html

Heres a fork

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