5

Ho due campi di input all'interno del mio contenuto di ioni e entrambi hanno un modello ng collegato a loro. Poi nel mio footer di ioni ho un ng-click dove chiamo una funzione e passo nei due modelli-ng.

Questo ha funzionato perfettamente quando avevo il ng-clic all'interno del contenuto di ioni, ma quando lo sposto sul piè di pagina ottengo un indefinito per i due parametri che passo alla funzione.

Quindi, questo significa che il contenuto di ioni e il footer di ioni hanno diversi $ scope? Anche se sono nello stesso file e hanno lo stesso controller ??

+1

creare un ambito come '$ scope.data = {}' & posiziona tutti i modelli-ng che sono associati su html.place in questo oggetto come 'ng-model =" data.model1 "', 'ng-model =" data.model2 "' –

+0

@pankajparkar awesome! Funziona come un fascino! Ma sono ancora curioso di sapere perché non stava funzionando come era? Contenuto e piè di pagina hanno ambiti diversi nel caso di ng-model, in cui non ho una variabile predefinita nel mio controller? Solo curioso. –

+0

Credo che il contenuto di ioni e il footer di ioni creino un ambito figlio .. e come hai dichiarato '$ scope.data = {}' nel tuo controller e accedi alla sua proprietà interna di esso..che erediterà lo scope dal genitore .. dovrei aggiungere una risposta? –

risposta

7

Credo ion-footer & ion-content crea un nuovo ambito figlio che è Prototypically inerherit da corrente scopo. Sotto codice ionico vi darà una migliore illustrazione che come funziona internamente, il scope: true, è responsabile per la creazione di un nuovo ambito figlio.

Codice

.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>', 

è necessario utilizzare . annotazione risolverà il vostro problema

Eg.

Se si utilizza variabile come primitivo come

$scope.volume = 5 

quindi è necessario utilizzare:

$scope.data = { 'volume' : 5} 

Angular Prototypal Scope Inheritance

4

Spiegazione della risposta nei commenti da pankajparkar:

direttiva ioni contenuti ha il suo nuovo perimetro. Funziona usando la notazione punto (importante quando si tratta di portata eredità)

è per questo che funziona con ng-model = "data.model1

Si prega di fare riferimento a:

AngularJS documentation on scopes

Egghead video