Dans AngularJS, tout code javascript en ligne inclus dans les modèles HTML ne fonctionne pas
Dans AngularJS, tout code javascript en ligne inclus dans les modèles HTML ne fonctionne pas.
Par Exemple:
Principal.fichier html:
<div ng-include="'/templates/script.html'"></div>
Et script.fichier html:
<script type="text/javascript">
alert('yes');
</script>
Quand j'ouvre la page principale, je m'attends à un message d'alerte qui dit " oui " mais rien ne se passe. Je pense que certaines restrictions de sécurité dans AngularJS empêchent les scripts en ligne, mais je n'ai trouvé aucune solution à ce sujet.
Note: je n'utilise pas jQuery ou tout autre framework, seulement AngularJS 1.2.7.
4 réponses
JQlite ne prend pas en charge les balises de script. JQuery Le fait, donc la recommandation est d'inclure jQuery si vous avez besoin de cette fonctionnalité.
De Igor Minar D'Angular dans cette discussion :
Nous avons examiné la prise en charge des balises de script dans jqlite, mais ce qui doit être fait pour obtenir un support multi-navigateur implique beaucoup de magie noire. Pour cette raison nous avons décidé que, pour l'instant, nous allons recommander que les utilisateurs utilisent jquery avec angulaire dans ce cas particulier. Il ne fait pas de sens pour nous de réécrire un tiers de jquery pour obtenir ce travailler dans jqlite.
Voici le problème GitHub connexe jqLite devrait créer des éléments de la même manière que jQuery où Igor résume, avant de fermer le problème, avec ceci:
C'est trop de folie pour jqlite, donc nous n'allons pas le faire. Au lieu de cela nous allons documenter que si vous voulez avoir des éléments de script dans les modèles ng:include ou ng:view, vous devez utiliser jquery.
Angular utilise les directives $ sanitize sur ng-include qui supprime les scripts. Une meilleure approche pour les modèles consiste à créer un contrôleur pour ce modèle.
Il est préférable d'utiliser un contrôleur individuel pour les modèles.
Dans le modèle.html
<form role="form" ng-controller="LoginController">
<input type="text" placeholder="Email" ng-model="email">
<input type="password" placeholder="Password" ng-model="password">
<button class="btn btn-success" ng-click="login()">Sign in</button>
</form>
Dans le LoginController vous pouvez utiliser le code que vous voulez
angular.module('myApp.controllers', []).
controller('LoginController', [function() {
alert('controller initialized');
}])
L'événement déclenché lorsque ng-include ajoute du contenu est $includeContentLoaded. Vos scripts doivent être inclus dans cet événement:
Par exemple (Plucker Démo):
function SettingsController($scope, $window) {
$scope.template={};
$scope.template.url = "demo.html";
$scope.$on('$includeContentLoaded', function(event){
$window.alert('content load');
});
}
En outre, vous pouvez définir une fonction d'initialisation en utilisant l'attribut onload:
Html
Contrôleur de
$scope.alertMe=function(){
$window.alert('sending alert on load');
}
Incluez jQuery et modifiez l'ordre des angular.js et jquery.js. jQuery doit être le premier, sinon cela ne fonctionne pas