web-dev-qa-db-fra.com

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:

fichier main.html:

<div ng-include="'/templates/script.html'"></div>

Et fichier script.html:

<script type="text/javascript">
    alert('yes');
</script>

Lorsque j'ouvre la page principale, j'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.

Remarque: je n'utilise pas jQuery ou tout autre framework, seulement AngularJS 1.2.7.

javascripthtmlangularjs
27
Murat Çorlu

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 le moment nous allons simplement recommander aux utilisateurs d'utiliser jquery avec angular dans ce cas particulier. Cela n'a pas de sens pour nous de réécrire un tiers de jquery en faire fonctionner cela dans jqlite.

Voici le problème lié à github 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.

plongeur de démonstration avec jquery

23
KayakDave

Angular utilise le $ sanitize sur ng-include directives qui suppriment 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 template.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');
  }])
6
Nathaniel Johnson

Inclure jQuery et changer l'ordre du angular.js et jquery.js. jQuery doit être le premier, sinon cela ne fonctionne pas

3
Mustafa SAHIN AYDIN

L'événement s'est déclenché lorsque ng-include ajoute du contenu est $includeContentLoaded. Vos scripts doivent être inclus dans cet événement:

Par exemple ( Plucker Demo ):

function SettingsController($scope, $window) {
  $scope.template={};
  $scope.template.url = "demo.html";

  $scope.$on('$includeContentLoaded', function(event){
    $window.alert('content load');
  });

}

De plus, vous pouvez définir une fonction init à l'aide de l'attribut onload:

html

<div ng-include = "template.url" onload = "alertMe ()"> </div> </div>

Contrôleur 

$scope.alertMe=function(){
    $window.alert('sending alert on load');
  }
3
Dalorzo