angularjs - ng-switch không liên kết ng-model

Question

Tôi có repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq hiển thị khi tôi nhấp vào 'Title3' và nhập giá trị vào hộp văn bản mặc dù giá trị được nhập hiển thị được phản ánh trong giao diện người dùng, khi tôi nhấp vào 'nhấp chuột 'nút không có gì được ràng buộc cho thuộc tính scope $ scope.test.

Tôi không biết điều gì sai với ng-switch hoặc có thể tôi đang làm điều gì sai. Trợ giúp được đánh giá cao !!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1

Đây là vấn đề phạm vi di sản do ng-switch tạo riêng của mình phạm vi.

Một đề xuất được thực hiện thường xuyên là luôn sử dụng dot trên các kiểu máy. Lý do là khi mục phạm vi điều khiển là một đối tượng và không phải là một phạm vi phụ, nguyên thủy sẽ tạo một tham chiếu đến đối tượng ban đầu. Nếu mô hình là nguyên thủy, nó sẽ không cập nhật bản gốc.

Ví dụ:

<input ng-model="test.value" placeholder="pre" type="text" /> 

$scope.test={value:''} 

phương pháp khác là sử dụng $parent trong đánh dấu mô hình html:

<input ng-model="$parent.test" placeholder="pre" type="text" /> 

Sử dụng phương pháp dot là một thực hành tốt để tránh những vấn đề như bạn don không cần phải suy nghĩ về phạm vi lồng nhau sâu hơn.

Demo sử dụng test.value như mô hình: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

tham khảo liên quan đến dot trong các mô hình (đọc có giá trị): https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

Điều này là do bạn đang thực sự tạo phạm vi con bên trong ng-switch. Vì vậy, một thuộc tính test khác tồn tại trên một phạm vi thuộc về chỉ thị ngSwitch. Ban đầu nó sẽ hiển thị giá trị từ phạm vi cha mẹ của nó, nhưng khi bạn chỉnh sửa nó, bởi vì nó là nguyên thủy, nó chỉ chỉnh sửa giá trị trên con, không phải là giá trị gốc. Nguyên mẫu thừa kế không đi vào chơi ở đây (nhưng đó là những gì chúng ta cần).

Khi bạn nhấp vào nút mà nút đang cảnh báo/bàn điều khiển. Hãy bật thuộc tính trên phạm vi chính ... mà trẻ không thể thay đổi.

Để khắc phục điều này sử dụng $parent.test trên thuộc tính ng-mô hình của bạn trong ngSwitch của bạn:

một đoạn:

<span class="pew" ng-switch-when="title2"> 
    <input ng-model="$parent.test" placeholder="pre" type="text" /> 
    {{test}} 
</span> 

And here's a fork of your plunker showing it in action.

Answer 3

Tôi đã gặp phải vấn đề tương tự, và tôi đã giải quyết bằng cách tạo ra một biến phạm vi trong bộ điều khiển và sử dụng nó với số ng-include và ng-switch. Bằng cách này, nếu bạn đã lồng vào nhau ng-include với số ng-switch và tiếp tục, chúng tôi vẫn có thể trực tiếp sử dụng biến phạm vi đó.

Như tất cả các phạm vi con (ở đây, ng-include/ng-switch) kéo dài từ phạm vi cha mẹ (nói chung, phạm vi điều khiển), chúng ta có thể truy cập phạm vi cha mẹ trực tiếp từ với trong những phạm vi con mà không có một vấn đề.

Sử dụng $parent sẽ đòi hỏi phải viết như $parent.$parent.$parent.someProp

Ví dụ Plunk:http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p=preview