AngularJS ng-if và phạm vi

Question

Tôi đang cố gắng hiểu ng-if và phạm vi. Như tôi biết, ng-nếu tạo ra một phạm vi con mới. Đây là vấn đề của tôi:

Xem

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

khiển

$scope.someCondition = true; 

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

Nếu someCondition được thiết lập là true, sau đó someValue2 nên giống như someValue1.

Vấn đề của tôi là tôi không thể truy cập someValue2 trong cả hai trường hợp (đúng hoặc sai). Làm thế nào tôi có thể đạt được điều này?

Answer 1

Từ những gì tôi biết, ng-if chỉ là tuyên bố mức hiển thị. Bạn có thể sử dụng nó để làm cho một số phần tử có thể nhìn thấy/vô hình cho một số giá trị nhất định nhưng tôi không nghĩ rằng nó tạo ra bất kỳ loại phạm vi nào. Những gì mã HTML của bạn sẽ làm là chuyển đổi khả năng hiển thị của đầu vào thứ cấp của bạn.

Nếu bạn muốn chuyển đổi giá trị của bạn từ 2 đến giá trị bằng 1 bất cứ khi nào "someCondition" thay đổi giữa giả và thật, sau đó bạn có thể sử dụng $ xem có cái gì đó như thế này:

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

Answer 2

ngIf không thực sự tạo một phạm vi mới sử dụng thừa kế prototypal. Điều đó có nghĩa là đối tượng nguyên mẫu của phạm vi ngIf là phạm vi cha mẹ của nó. Vì vậy, nếu thuộc tính không được tìm thấy trên ví dụ ngIf của phạm vi của nó, nó sẽ xem xét nó là chuỗi đối tượng nguyên mẫu cho thuộc tính đó. Tuy nhiên, một khi bạn gán một thuộc tính cho thể hiện của phạm vi nó sẽ không còn nhìn vào chuỗi thừa kế của nó cho thuộc tính. Đây là một liên kết giải thích sự thừa kế nguyên mẫu được sử dụng trong JS. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

Cách giải quyết vấn đề này. điều khiển

phụ huynh:

$scope.data = {someValue: true}; 

điều khiển trẻ em:

$scope.data.someValue = false 

Bởi vì bạn đang không hề giấu giếm một thuộc tính trên phạm vi cha mẹ của nó, bạn chỉ cần biến đổi một đối tượng trên phạm vi các bậc cha mẹ, đây thực sự sẽ thay đổi obj dữ liệu của cha mẹ. Vì vậy, trong trường hợp của bạn.

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

Answer 3

Vâng, ng-if tạo ra một phạm vi con mới

Để xem thuộc tính mô hình trong một ng-if, ngón tay cái rule of-là:

KHÔNG SỬ DỤNG PHẠM VI AS MODEL

ví dụ

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

Sử dụng một tài sản đối tượng trong ng-mô hình - sau đó, ngay cả khi ng-if tạo ra phạm vi con mới, phạm vi phụ huynh sẽ có những thay đổi.

Để xem Plunker làm việc, nhìn ở đây: http://jsfiddle.net/Erk4V/4/