2013-08-13 10 views
46

Mam kilka skryptów specyficznych dla widoku. Jednak skrypt nie działa, gdy angularjs wczytuje widok.Angularjs nie ładuje skryptów w ramach 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 - ładunki pod NG-view

hello world 
    <script> 

    alert('Hello, John!') 

    </script> 

W tym przykładzie, gdy strona załadowała widzę podstawowy hello world drukowane na stronie internetowej. Jednak nie dostaję żadnego popu mówiącego "Hello, John".

Każdy pomysł, dlaczego nie mogę załadować skryptów specyficznych dla określonego widoku?


Extra informacji app.js

'use strict'; 

angular.module('adminApp', []) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

controllers/main.js

'use strict'; 

angular.module('adminApp') 
    .controller('MainCtrl', function ($scope) { 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 
    }); 

Odpowiedz

62

to sposób jqLite działa. Jeśli chcesz, aby skrypty w szablonach były oceniane, dodaj: jQuery przed AngularJS. Jeśli dołączony jest jQuery, skrypt zostanie oceniony. Spróbuj usunąć jQuery i zobaczysz pierwotnie obserwowane zachowanie.

Updated: ponieważ niektórzy ludzie poprosił o opracowanie w komentarzach, to jest tutaj:

Gdy trasa jest dopasowany, ngView wykorzystuje jqLite (lub jQuery, o ile załadowany) html() sposób ustawić zawartość element (na którym jest zadeklarowany ngView). Innymi słowy, ngView.link() robi coś takiego:

$element.html(template) 

więc sprowadza się do tego, jak html() jest realizowany w jqLite i jQuery. jqLite używa natywnej właściwości innerHTML, która tylko ustawia zawartość, ale nie ocenia skryptów. Z drugiej strony, jQuery analizuje wszystkie znaczniki skryptów i wykonuje je (przez konstruowanie i dołączanie elementów DOM skryptu do strony).

+0

Dodawanie jquery nie praca!Dzięki! :) – Karan

+0

Link do Plunkera nie działa. – Nitz

+0

Prawdopodobnie to usunęli, czy jakikolwiek powód, dla którego nie mam pojęcia. Pozostaje punkt: jeśli chcesz uruchomić skrypt, włącz jQuery. –

1

Jeśli dołączę mój skrypt, który musi pracować z widokiem, w jaki sposób mogę go uruchomić po załadowaniu widoku? Nie chcę dołączać jquery i/lub fragmentować mojego skryptu.

Aby wykonać tag <script> bez ładowania jQuery, użyj jqLite znaleźć tag <script> a następnie evalinnerHTML.

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

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

}); 

DEMO on PLNKR

Zobacz również AngularJS Issue #369 — jqLite should create elements in same way as jQuery