Angular JS: laden Sie benutzerdefinierte javascript-Datei in der ng-view
Ich bin mit Angular Js
für front-end von meinem Beispiel, eine Vorlage erstellt und geladen Ansichten dynamisch je nach Anforderung. Ich bin mit angular
, jquery
und cusotm js
für mein Beispiel-Anwendung. Meine Vorlagen fein gearbeitet und grundlegende Struktur ist wie folgt:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
---------------- bootstap, css etc ----------- stylesheet include
<script src='assets/js/angular.min.js' type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
-------------------- jquery, bootstrap ---------- javascript include
<script src='lib/angularjs/angular-route.js' type="text/javascript"></script>
<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>
Wenn die Anwendung ausgeführt wird, werden alle meine Skript-und style-sheets sind erfolgreich geladen. Aber in meinem custom-function.js
verwende ich Elemente id
und classes
für die Durchführung einige arbeiten. Wenn die custom-function.js
geladen, es gibt kein Dokument, keine Struktur definiert ist, da das Dokument geladen ist, dynamisch, mit <div ng-view></div>
.
Ich versuche auch, mir zu gehören <script src='lib/angularjs/custom-function.js' type="text/javascript"></script>
in meinem Dokument, das dynamisch geladen eckig, aber custom-function.js
Funktion wird nicht ausgeführt.
Ich bin neu in eckig, ich suchte in google, aber noch keine geeignete Lösung. wie könnte ich dieses Problem lösen?
Sie können den zugehörigen script-tag
<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>
zum Ende der view-Vorlage, die geladen ng-view.Hallo @nerezo wir dies bereits versucht, das Skript geladen wird, aber nicht funktioniert
können Sie ein Beispiel geben, über das, was code in das benutzerdefinierte Skript?
die Methode, wie
$(document).ready(function() { }
- Funktion für Dokumente, die Elemente.InformationsquelleAutor Harmeet Singh Taara | 2015-03-19
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit Hilfe von ngRoute kann eine Vorlage geladen werden, die mit einem script-tag enthält die js-Datei enthält javascript-codes, die wir laufen wollten.
Bitte schauen Sie das folgende Beispiel für Verwendung:
http://embed.plnkr.co/AonatjhKlPMaOG6vVWW1/preview
$(document).ready(function() { })
- Funktion funktioniert gut, aber meine Elemente Ereignisse sind, nicht binden. Nach der Bestimmung google, meist Entwickler sagen, dass, nutzen$(window).load(function() { })
statt-Dokument, da Ihre Elemente nicht richtig geladen, aber in der Dokument-Funktion bin ich auch, suchen Sie nach dem element-Objekt erfolgreich. In meinemcustom js
Datei, wenn ich$(window).load(function() { })
wird dies nicht funktionieren. wie kann ich das machen?wenn ich versuche, auf
alert($("#element))
ist dies das Objekt anzuzeigen. Aber wenn ich versuche, aufalert($("#element)[0])
dies zeigenelement undefine
im$(document).ready(function() { })
Funktion.Hi @HarmeetSinghTaara, ich aktualisiert die plnkr Skript oben. Ich kann wählen Sie ein Feld aus, das zwischen den body-tag und von den anderen geladenen Vorlage erfolgreich. Und auch kann ich die Werte ändern oder die Stile von Ihnen und binden von Methoden. Wie ich sehe, hatten Sie vergessen, ein Zitat auf deinen char selector
alert($("#element))
nach dem #element.Danke @nerezo , diese Arbeit für mich. wirklich dankbar für Sie
neues problem, das ich konfrontiert ist, dass, wenn meine Seite geladen ist, die Bilder sind Holen von einem anderen server und es dauert seine Zeit. das ist, warum, meine Veranstaltungen in
$(document).ready(function() { })
sind nicht binden. Wenn ich aber diese Ereignisse auf die Verzögerung, es funktioniert.InformationsquelleAutor nerezo
Diesem Beispiel könnte Ihnen helfen, eine Lösung zu finden mit 'ngRoute' - Modul zu laden, was Sie möchten, um in der show 'ng-view' können Sie geben Ihre Anweisungen .js-Datei.
yourinstruction.js Datei
InformationsquelleAutor shermi
Können Sie lösen dieses Problem durch Verwendung von '$viewContentLoaded', wie es in diesem tutorial:
http://www.aleaiactaest.ch/2012/06/28/angular-js-and-dom-readyness-for-jquery/
Weitere Möglichkeit ist die dependency injection (die Eckige). Der erste Teil dieses Tutorials zeigen uns, wie man eine externe lib, indem Sie mit dependecy injection.
http://www.ng-newsletter.com/posts/d3-on-angular.html
InformationsquelleAutor Rochadsouza