AngularJS - Controller in meinem teilweise
Habe ich eine Vorlage, die appendend viele Male in meinem DOM.
<div ng-controller="theController">
content does not matter
</div>
Also der controller ist istantiated viele Male.
Dies ist ein problem, denn wenn ich einen Wächter im controller
theController = function($scope) {
$scope.$on('myVar', function() {
//run one time for each time the template is repeated
})
}
Irgendwelche Ideen, wie man diese vermeiden?
Vielen Dank im Voraus.
UPDATE
OK, ich werde versuchen, klarer zu werden.
Vielleicht habe ich ein Formular, dass dynamisch erstellt auf der Grundlage der Antwort auf eine asynchrone Anforderung.
<form ng-controller="formController">
<div ng-repeat="f in fields">
<ng-inclide src="f.fields"></ng-include>
</div>
</form>
Der controller ist so etwas wie:
function formController($scope) {
$scope.fields = [{ template:'', ... }];
//data come from an ajax request...
//here are static for the sake of simplicity.
}
So, ich weiß nicht, welche Felder angefügt werden, in der form.
Den Formular-Feld-Struktur gespeichert in html partials... so etwas wie:
<div ng-controller="inputController">
<label> .... </label>
<input type="text" .... />
</div>
oder
<div ng-controller="selectController">
<label> .... </label>
<select>
....
</select>
</div>
function selectController($scope){
$scope.$on("myCustomEvent", function(event) {
cionsole.info("Options were updated");
});
}
Wenn das Formular verfügt über eine mehr als input type=text
oder eine select
, die inputController
oder die selectController
sind instanziert, mehr als einmal.
Warum wollen Sie nicht die $Uhr auftreten, für jede Instanz?
Möchte ich zum aktualisieren der Optionen eines selects in die Seite, wenn ein bestimmtes Ereignis Eintritt.
Was ich bekomme, anstatt dass ich ein update für alle die wählen Sie in der Seite.
Aus dem Kommentar, ich habe verstanden, dass falsch ist, müssen mehr Elemente mit dem gleichen controller auf der gleichen Seite.
So derzeit die einzige verfügbare Lösung scheint mir, dass ist zu vermeiden, definieren Sie einen controller für jedes element des Formulars, richtig?
UPDATE 2
$emit
wird in der inputController:
function inputController() {
$scope.fireclick = function(p) {
if (p == 'specificInput') {
/* this is a temporary work around
I used to bind the event only with a specific field */
$scope.$emit("myCustomEvent");
}
}
}
Dies ist der vollständige code des input-Feld in der html-partial:
<input type="text" ng-click="fireclick(f.name);" name="{{f.name}}" />
@Jemand:
Konnte zumindest bestätigen, (und schließlich sagen, warum), haben auf der gleichen Seite mehrere Elemente mit dem gleichen controller ist falsch
- Controller-Instanzen kann nicht (und sollte nicht) werden gemeinsam von mehreren Elementen. Was sind Sie versuchen zu tun und warum wollen Sie nicht die
$watch
auftreten, für jede Instanz? Controller sind von Natur aus lokalen, wo Sie sind mit Ihnen in den DOM - Sie sind nicht in der gesamten Anwendung - so dass, wenn die$watch
mehrfach ausgelöst, ist eine Frage, die du wahrscheinlich etwas falsch zu machen. - ist die Veranstaltung zu einem boradcast/emittieren
- Ich verwendete $rootScope.$emit('myCustomEvent')
- wer ist das abfeuern dieser Veranstaltung ist es, innerhalb der form, oder von irgendwo elese
- Kannst du die Codes, die Entlassung der Veranstaltung
- Ich aktualisierte die Frage...
- konnte zumindest bestätigen, dass mehr als ein element mit dem gleichen controller ist falsch?
- Nein, es sollte kein problem sein
- In Ihrer Verwendung das problem scheint zu sein, die Sie nicht definiert haben, Zielgruppe der Veranstaltung, die Sie aussenden der Veranstaltung von der Wurzel Geltungsbereich für alle Kinder
- Wie könnte man definieren das Ereignis ausgelöst, wenn das Eingangssignal
x
hat habhaft werden, nur wählen Siey
- So, vielleicht wissen Sie auch, wie könnte ich das Problem lösen?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist, wie ich es geschafft, ein Formular mit rekursiven Felder (basierend auf diesem SO beantworten: https://stackoverflow.com/a/15663410/1036025)
Ergebnis [Bild-link]:
Den view-controller die Lasten der Home.html teilweise mit einem ng-view:
Den form-controller was drin ist Home.html:
Den Hause Teilansicht (hier der template-Pfad in ng-include könnte eine Eigenschaft der Felder, oder Sie können verwenden Sie eine switch-case und display, die Eingabe/wählen Sie Ihre Wahl:
Den field.html Vorlage (entweder ein template pro Typ des Feldes, oder ein main-template mit einer switch-case auf dem Feld.type-Eigenschaft)
Ich denke, dass das Eckige Weg, dies zu tun ist die Verwendung von Richtlinien. Ich möchte etwas tun, wie ein ng-Schalter in der main-view die ng-repeat, und haben die ng-wechseln Sie einfach die entsprechende Richtlinie... Davon ausgehend, dass eine "input-text" - Richtlinie ein "Eingabe-dropdown-Richtlinie" vorhanden:
Ich glauben diese Weise werden Sie nicht haben das gleiche Problem, das Sie jetzt haben. Ich habe nicht wirklich das setup, was Sie zu tun versuchen, aber ich bin mir zu 99% sicher, dass Sie sollten mit den Richtlinien! Sie sind ideal für die Art von Sache, die Sie tun, und wird viel mehr immer wieder verwendbar.
Ich benutze eine Richtlinie über http://angularlist.com zu behandeln, die Bewertungen, und ich kann getrost sagen, Sie überqueren Sie nicht die Drähte, wenn ich mehr als einen auf der Seite - Das heißt, ich bin nicht gerade dort nichts, nur reagieren auf Ereignisse... Eigentlich, lassen Sie mich etwas testen (testing.........) Ja! Ich habe eine Uhr auf der Modell-Wert der meine Bewertungen Richtlinie bearbeitet und beim Klick auf ein a-rating, nur EIN watcher ausgelöst wird - die eine für die Steuerung in Frage. Dies ist nicht auf der live-site, nur mein dev-server hier zu Hause, aber hier ist die Richtlinie, wenn es Ihnen hilft:
Richtlinien sind hart, um Ihren Kopf gewickelt, bin ich immer noch hauptsächlich nur Schießen in der Dunkelheit mit Ihnen, versucht, die Dinge zu sehen, wie Sie arbeiten - aber kein Zweifel - die power, die Sie brauchen, ist in den Richtlinien. Ich empfehle das Lesen der AngularJS docs auf writting Richtlinien und dann verbringen Zeit mit der Suche an anderer Leute-Richtlinien - es gibt viele verfügbar auf GitHub zu lernen!
Hier ist ein plunk, um Ihnen zu helfen zusammen für dieses Szenario ...
http://plnkr.co/edit/RvFrmPd4rlAM8aeFSwg7?p=preview
Dies ist nur ein Beispiel dafür, wie dies erreicht werden kann. Ohne zu wissen, wie viel Kontrolle haben Sie über das Formular config-Daten nicht wirklich möglich zu bieten eine umfassende Antwort. Zwischen wenn Sie wissen wollen, ist es besser, um zu injizieren, $rootScope, wo immer Sie wollen, eine $broadcast ( $emittieren geht bis der DOM-Baum, während die $broadcast nach unten geht.. Also $Rundfunks vom $rootScope erreichen die gesamte app. )
Lassen Sie mich wissen, wenn dies Ihnen hilft, aus.