Angularjs не загружает скрипты в ng-view
У меня были некоторые сценарии, специфичные для представления. Однако script, похоже, не выполняется, когда angularjs загружает представление.
Index.html
<html>
<body ng-app="adminApp">
<div ng-view=""></div>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
Main.html - загружается под ng-view
hello world
<script>
alert('Hello, John!')
</script>
В этом примере, когда загружается страница, я вижу основной мир привет, напечатанный на веб-сайте. Тем не менее, я не получаю всплывающее сообщение "Привет, Джон".
Любая идея, почему я не могу загрузить сценарии, специфичные для определенного вида?
Дополнительная информация
app.js
'use strict';
angular.module('adminApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Контроллеры /main.js
'use strict';
angular.module('adminApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
Ответы
Ответ 1
Это способ jqLite. Если вы хотите, чтобы скрипты в шаблонах были оценены, включите jQuery перед AngularJS. Если включен jQuery, будет оценен script. Попробуйте удалить jQuery, и вы увидите первоначально обнаруженное поведение.
Обновлено: поскольку некоторые люди просили уточнить в комментариях, вот он:
Когда маршрут сопоставляется, ngView использует jqLite (или jQuery, если он загружен) html() метод для установки содержимого элемента (объявляется <<20 > ). Другими словами, ngView.link() делает что-то вроде этого:
$element.html(template)
Итак, это сводится к тому, как html() реализуется в jqLite и jQuery. jqLite использует родное свойство innerHTML, которое только устанавливает контент, но не оценивает скрипты. С другой стороны, jQuery анализирует все теги script и выполняет их (путем создания и добавления элементов DOM script на страницу).
Ответ 2
Если я включаю свой script, который должен работать с представлением, как я могу вызвать его при загрузке представления? Я не хочу включать jquery и/или фрагментировать мой script.
Чтобы выполнить тег <script> без загрузки jQuery, используйте jqLite, чтобы найти тег <script>, а затем eval innerHTML.
app.controller("vm", function($scope, $element) {
//FIND script and eval
var js = $element.find("script")[0].innerHTML;
eval(js);
});
DEMO на PLNKR
См. также Проблема с AngularJS # 369 - jqLite должен создавать элементы так же, как jQuery
