2015-06-11 21 views
10

Sto cercando di capire ng-if e scope. Come so, ng-if crea un nuovo scope figlio. Ecco il mio problema:AngularJS ng-if e scope

View

<input ng-model="someValue1" /> 
<div ng-if="!someCondition"> 
    <input ng-model="$parent.someValue2" /> 
</div> 

controller

$scope.someCondition = true; 

if ($scope.someCondition) { 
    $scope.someValue2 = $scope.someValue1;   
} 

Se someCondition è impostata su true, allora someValue2 dovrebbe essere la stessa di someValue1.

Il mio problema è che non riesco ad accedere a qualcheValore2 in entrambe le situazioni (vero o falso). Come potrei ottenere questo?

+3

In angolare è necessario mai modificare direttamente le proprietà $ genitore valore.Tuttavia è possibile modificare la proprietà di $ parent properties o si interromperà l'ereditarietà. do: '$ parent.someValue.num = 10', non:' $ parent.someValue = 10' – Freezystem

risposta

-6

Da quello che sono a conoscenza, il ng-if è puramente una dichiarazione di livello di visualizzazione. Puoi usarlo per rendere visibili/invisibili alcuni elementi in base a determinati valori, ma non credo crei alcun tipo di ambito. Ciò che il tuo codice HTML farà è attivare la visibilità del tuo input secondario.

Se vuoi far passare il proprio valore da 2 a pari valore 1 quando si verificano cambiamenti "someCondition" tra falso e vero, allora si può utilizzare $ vedere con qualcosa di simile:

$scope.$watch(someCondition, function(){ 
    if (someCondition){ 
    $scope.someValue1 = $scope.someValue2 
    } 
}) 
+0

Grazie per il tuo commento. Anche la mia condizione è sul campo di applicazione, quindi non penso di doverlo guardare. –

+0

No. ngSe differisce da ngShow, ngHide in quanto non nasconde semplicemente l'elemento html. Lo distrugge completamente. Ed effettivamente crea un nuovo ambito usando l'ereditarietà prototipale. https://docs.angularjs.org/api/ng/directive/ngIf – user2734679

+1

@ user2734679 Nizza tizio, grazie per il link! Imparo qualcosa di nuovo su angolare ogni giorno :-) – FrankieAvocado

7

ngIf effettivamente creare un nuovo ambito utilizzando l'ereditarietà prototipale. Ciò significa che l'oggetto prototipo dell'ambito ngIf è quello del suo ambito genitore. Quindi, se l'attributo non viene trovato nell'istanza ngIf del suo ambito, esaminerà la sua catena di oggetti prototipo per quell'attributo. Tuttavia, una volta assegnato un attributo all'istanza dell'ambito, non esaminerà più la catena di ereditarietà dell'attributo. Ecco un link che spiega l'ereditarietà prototipale utilizzata in JS. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

Come risolvere questo. Controller

principale:

$scope.data = {someValue: true}; 

regolatore bambini:

$scope.data.someValue = false 

Perché non stai nascondendo un attributo su di essa la portata genitori, sei solo mutare un oggetto sulla portata genitori, questo cambierà davvero i dati dei genitori obj. Quindi nel tuo caso.

<input ng-model="data.someValue1" /> 
<div ng-if="!data.someCondition"> 
    <input ng-model="data.someValue2" /> 
</div> 
+0

farò immergersi in esso, grazie :) –

+0

user2734679 mi può dare un'altra spiegazione, forse? Con determinati valori di qualche valore. Purtroppo ancora non capisco. –

+0

Questa non è una cosa angolare. È una cosa javascript. Quindi ecco alcuni esempi di ereditarietà prototipale. – user2734679

19

Sì, ng-if crea un nuovo ambito bambino

Per guardare una proprietà modello in un ng-if, il pollice regola-of-è:

NON USARE LA PORTATA COME MODELLO

ad es.

ng-if='showStuff' //here my scope is model **INCORRECT** 
ng-if='someObject.showStuff' // ** CORRECT ** 

Utilizzare proprietà di un oggetto in ng-modello - quindi, anche se ng-if crea il nuovo perimetro del bambino, l'ambito genitore avrà le modifiche.

Per vedere un Plunker di lavoro, guarda qui: http://jsfiddle.net/Erk4V/4/

Problemi correlati