Angolare: ng-include, jQuery non funziona se non nel file HTML

Ho un file html di ng-include . Quando provo ad usare jquery nel mio file js, non si applica a quel file html. Tuttavia, quando includo lo script nel file HTML, funziona comunque. Mi chiedevo perché e come posso fare in modo che i miei script nel mio file js si applichino al mio file HTML di ng-include .

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

warning.html:

    $(function(){ $(".close").css("background","blue"); $(".close").click(function(){ $(".box").fadeOut(500); }); });  

Hey

Close

index.html:

           

Hello Plunker!

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 crea il DOM dynamicmente, quindi al momento del suo caricamento, il tuo codice jquery è già stato eseguito. È necessario eseguire il codice all’interno del file jquery una volta che angular ha finito di creare il DOM per warning.html

Ecco un modo semplice per farlo. ‘includeContentLoaded’ viene emesso dopo il caricamento di carichi angolari, quindi possiamo includere script al suo interno.

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

Il tuo jquery.js sarebbe simile a questo

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

Ora puoi rimuovere tutti gli script da warning.html

Ecco una forchetta

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