2015-06-11 13 views
10

Próbuję zrozumieć ng-if i zakresy. Jak już wiem, ng-if tworzy nowy zakres podrzędny. Oto mój problem:AngularJS ng-if i zakresy

Zobacz

<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;   
} 

Jeśli someCondition jest ustawiona na wartość true, a następnie someValue2 powinna być taka sama jak someValue1.

Mój problem polega na tym, że nie mogę uzyskać dostępu do jakiejś wartości w obu sytuacjach (prawda lub fałsz). Jak mogę to osiągnąć?

+3

W kątowe należy nigdy bezpośrednio modyfikować właściwości $ nadrzędną wartość.Można jednak zmodyfikować właściwość $ parent properties lub zerwiesz dziedziczenie. do: '$ parent.someValue.num = 10', nie:' $ parent.someValue = 10' – Freezystem

Odpowiedz

-6

Z tego, o czym wiem, ng-if jest czystym oświadczeniem na poziomie wyświetlacza. Możesz go użyć, aby niektóre elementy były widoczne/niewidoczne z powodu pewnych wartości, ale nie sądzę, że tworzy to jakiś zakres. To, co zrobi twój kod HTML, przełącza widoczność danych wejściowych.

Jeśli chcesz, aby przełączyć wartość 2 do równej wartości 1, gdy „someCondition” zmiany między fałszem a prawdą, to można użyć $ oglądać coś takiego:

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

Dziękuję za komentarz. Mój stan również dotyczy zakresu, więc nie sądzę, że muszę go oglądać. –

+0

No ngIf różni się od ngShow, ngHide w tym, że nie tylko ukrywa element html. Całkowicie go niszczy. I rzeczywiście tworzy nowy zakres przy użyciu prototypowego dziedziczenia. https://docs.angularjs.org/api/ng/directive/ngIf – user2734679

+1

@ user2734679 Miły gość, dzięki za link! Każdego dnia uczę się czegoś nowego o Angular :-) – FrankieAvocado

7

ngIf rzeczywiście stworzyć nowy zakres z wykorzystaniem prototypowego dziedziczenia. Oznacza to, że obiekt prototypu scope ngIf jest obiektem nadrzędnym. Jeśli więc atrybut nie zostanie znaleziony w instancji ngIf tego zakresu, zajrzy do łańcucha obiektów prototypowych dla tego atrybutu. Jednak po przypisaniu atrybutu do instancji zakresu nie będzie już patrzeć na jego łańcuch dziedziczenia dla atrybutu. Oto link wyjaśniający dziedziczenie dziedziczenia sypialni używane w JS. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

Jak rozwiązać ten problem. Kontroler

nadrzędny:

$scope.data = {someValue: true}; 

kontroler dziecka:

$scope.data.someValue = false 

Ponieważ nie ukrywamy atrybut na jego zakresu rodziców, jesteś po prostu mutacji obiekt na zakres rodziców tego, rzeczywiście zmieni dane rodziców obj. W twoim przypadku.

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

Zanurzę się w tym, dziękuję :) –

+0

użytkownik2734679 czy możesz podać mi inne wyjaśnienie? Z pewnymi wartościami someValue. Niestety nadal tego nie rozumiem. –

+0

To nie jest rzecz kanciasta. To sprawa javascript. Oto kilka przykładów prototypowego dziedziczenia. – user2734679

19

Tak, ng-if tworzy nowy zakres dziecko

Aby oglądać właściwości modelu w ng-if, zasada-of-thumb jest:

NIE UŻYWAĆ ZAKRESU jako model

np.

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

Użyj właściwości obiektu w NG-modelu - wtedy, nawet jeśli ng-if stwarza nowe możliwości dziecka, rodzic będzie miał zakres zmian.

Aby zobaczyć Plunker roboczą, zajrzyj tutaj: http://jsfiddle.net/Erk4V/4/