2013-08-13 4 views
46

У меня были некоторые сценарии, специфичные для представления. Однако сценарий, похоже, не выполняется, когда angularjs загружает представление.Angularjs не загружает скрипты в ng-view

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 - грузы под нг ракурса

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' 
    ]; 
    }); 

ответ

62

Это путь jqLite работы. Если вы хотите, чтобы скрипты в шаблонах были оценены, включите jQuery перед AngularJS. Если jQuery включен, сценарий будет оцениваться. Попробуйте удалить jQuery, и вы увидите первоначально наблюдаемое поведение.

Обновлено: так как некоторые люди просили разработки в комментариях, здесь:

Когда маршрут согласован, ngView использует jqLite (или JQuery-х, если загружен) html() метод, чтобы установить содержание элемент (объявляется ngView). Другими словами, ngView.link() делает что-то вроде этого:

$element.html(template) 

Так что сводится к тому, как html() реализуется в jqLite и JQuery. jqLite использует собственное свойство innerHTML, которое только устанавливает контент, но не оценивает скрипты. С другой стороны, jQuery анализирует все теги скриптов и выполняет их (путем создания и добавления элементов DOM сценария на страницу).

+0

Добавление JQuery сделал свою работу!Благодаря! :) – Karan

+0

Plunker link не работает. – Nitz

+0

Они, вероятно, удалили его, или по какой-либо причине я понятия не имею. Точка остается: если вы хотите выполнить скрипт, включите jQuery. –

1

Если я включаю свой сценарий, который должен работать с представлением, как я могу вызвать его при загрузке представления? Я не хочу включать jquery и/или фрагментировать мой скрипт.

Чтобы выполнить <script> тег без загрузки JQuery, используйте jqLite, чтобы найти <script> тег, а затем evalinnerHTML.

app.controller("vm", function($scope, $element) { 

    //FIND script and eval 
    var js = $element.find("script")[0].innerHTML; 
    eval(js); 

}); 

DEMO on PLNKR

Смотрите также AngularJS Issue #369 — jqLite should create elements in same way as jQuery

Смежные вопросы