В AngularJS любой встроенный код javascript, который включен в HTML-шаблоны, не работает

В AngularJS любой встроенный код javascript, который включен в HTML-шаблоны, не работает.

Пример:

main.html файл:

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

И script.html файл:

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

Когда я открываю главную страницу, я ожидаю сообщение с предупреждением "да", но ничего не происходит. Я думаю, что некоторые ограничения безопасности в AngularJS предотвращают встроенные скрипты, но я не мог найти обходного пути.

Примечание. Я не использую jQuery или любую другую инфраструктуру, только AngularJS 1.2.7.

Ответы

Ответ 1

jQlite не поддерживает теги script. jQuery делает, поэтому рекомендуется включать jQuery, если вам нужна эта функциональность.

Из Angular Игорь Минар в этом обсуждении:

мы рассмотрели поддержку тегов script в jqlite, но то, что должно быть чтобы получить кросс-браузерную поддержку, требуется много черной магии. Для по этой причине мы решили, что пока мы просто порекомендуем что пользователи используют jquery вместе с Angular в этом конкретном случае. Это не имеет смысла переписывать одну треть jquery, чтобы получить это работающий в jqlite.

Здесь связанная проблема github jqLite должна создавать элементы так же, как jQuery, где Игорь подводит итог, прежде чем закрывать проблему, с помощью этого:

Это слишком сумасшествие для jqlite, поэтому мы не собираемся это делать. Вместо этого мы собираемся документировать, что если вы хотите иметь элементы scriptв ng: include или ng: просмотреть шаблоны, вы должны использовать jquery.

демонстрационный плункер с jquery

Ответ 2

Angular использует $sanitize в директивах ng-include, которые вырезают скрипты. Лучшим подходом для шаблонов является создание контроллера для этого шаблона.

Лучше использовать отдельный контроллер для шаблонов.

В 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>

В LoginController вы можете использовать любой код, который вы хотите

angular.module('myApp.controllers', []).
  controller('LoginController', [function() {
      alert('controller initialized');
  }])

Ответ 3

Событие, инициированное, когда ng-include добавляет контент $includeContentLoaded. Ваши скрипты должны быть включены в это событие:

Например (демонстрация Plucker):

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

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

}

Дополнительно вы можете установить функцию init с помощью атрибута onload:

HTML

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

контроллер

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

Ответ 4

Включить jQuery и изменить порядок angular.js и jquery.js. jQuery должен быть первым, иначе он не работает.