ion-content und ion-footer haben unterschiedliche $ scope

Ich habe zwei Eingabefelder in meinem Ionen-Inhalt und beide haben ein ng-Modell an sie angehängt. Dann habe ich in meinem Ion-Footer einen ng-click, wo ich eine Funktion anrufe und die beiden ng-Modelle übergebe.

Das alles funktionierte gut, als ich den ng-klick innerhalb des Ioneninhalts hatte, aber wenn ich es zur Fußzeile bewege, werde ich undefiniert für die zwei Parameter, die ich an die Funktion übergebe.

Also bedeutet dies, dass Ionen-Inhalt und Ion-Footer unterschiedliche $ scope haben? Obwohl sie in der gleichen Datei sind und denselben Controller haben ??

Quelle

2015-05-08 Mr.P

einen Bereich, wie '$ scope.data = {}' & Platziere alle ng-Modelle, die an html.place gebunden sind in diesem Objekt wie 'ng-model =" data.model1 "', 'ng-model =" data.model2 "' –

@pankajparkar super! Klappt wunderbar! Aber ich bin immer noch neugierig, warum es nicht so funktionierte wie es war? Haben Inhalt und Fußzeile im ng-Modell unterschiedliche Bereiche, in denen ich keine vordefinierte Variable in meinem Controller habe? Nur neugierig. –

Ich glaube, ion-content & ion-footer erstellt einen untergeordneten Bereich .. & wie Sie '$ scope.data = {}' in Ihrem Controller deklariert haben & greifen Sie auf seine innere Eigenschaft davon zu, die den Geltungsbereich von übergeordneten Elementen erbt .. sollte ich Antwort hinzufügen? –

Ich glaube, ion-footer & ion-content erstellt neues Kind Bereich, der Prototypically inerherit aus aktuellen ist Umfang. Unter ionischer Code wird Ihnen bessere Illustration, dass wie es intern funktioniert, die scope: true, ist verantwortlich für das Erstellen eines neuen untergeordneten Bereichs.

-Code

.directive('ionContent', [ 
    '$parse', 
    '$timeout', 
    '$ionicScrollDelegate', 
    '$controller', 
    '$ionicBind', 
function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    require: '^?ionNavView', 
    scope: true, //<-- this creates a prototypically inerherited scope 
    template: 
    '<div class="scroll-content">' + 
     '<div class="scroll"></div>' + 
    '</div>',

Sie benötigen . Anmerkung verwenden, wird Ihr Problem

Eg beheben.

Wenn Sie Variable als primitive wie