Angularjs: 2 cách liên kết không hoạt động trong mẫu được bao gồm

Question

Tôi nghĩ rằng tôi thiếu một cái gì đó đơn giản (và quan trọng) ở đây. Tôi đang sử dụng một mẫu bao gồm chứa một đầu vào đó là ánh xạ tới một số giá trị:

<div ng-controller="Ctrl"> 
    <div ng-include src="'template.html'"></div> 
</div> 

<!-- template --> 
<script type="text/ng-template" id="template.html"> 
    <input ng-model="testvalue" /> 
</script> 

Bộ điều khiển:

function Ctrl($scope) {  
    $scope.testvalue= "initial value"; 
}​ 

cảnh báo giá trị của $ scope.testvalue luôn luôn hiển thị giá trị ban đầu, không phải là cập nhật giá trị (khi bạn nhập vào đầu vào). Giúp tôi Obi-Wan. Bạn là niềm hy vọng duy nhất của chúng tôi.

Fiddle: http://jsfiddle.net/h5aac/

Answer 1

Đây là tất cả các quá phổ biến của liên kết với một nguyên thủy thay vì một đối tượng. Giá trị của chuỗi được truyền xung quanh và không phải là tham chiếu đến một đối tượng. Nếu bạn sử dụng một đối tượng thay vì một nguyên thủy, nó hoạt động tốt. Một cái gì đó như thế này trong phạm vi của bạn.

$scope.foo = {testvalue: "initial value"}; 

Xem http://jsfiddle.net/h5aac/2/

Ngoài ra:

Using `ng-model` within a transcluded directive in AngularJS

binding issue when a directive in a ngRepeat

AngularJS - updating scope value with asynchronous response

Tôi chắc rằng có rất nhiều ...

Answer 2

Một thay thế cho tham khảo một tài sản đối tượng trong phạm vi cha mẹ là sử dụng $ cha mẹ để truy cập nguyên thủy trong phạm vi phụ huynh:

<input ng-model="$parent.testvalue" /> 

ng-bao gồm tạo ra một phạm vi nhỏ. Phạm vi đó nguyên mẫu được thừa hưởng từ phạm vi cha mẹ của Ctrl. Đây là cách 3 biến thể làm việc:

• $ parent.testvalue gắn mô hình đối với tài sản trong phạm vi mẹ
• testvalue tự gắn các mô hình để một tài sản mới sẽ được tạo ra trên phạm vi trẻ em. Thuộc tính này "đổ bóng/ẩn" thuộc tính phạm vi cha mẹ bằng cùng một tên.
• foo.testvalue (ví dụ: xem câu trả lời của @ dnc253) cũng liên kết mô hình với thuộc tính gốc. Nó hoạt động như thế này: Javascript không nhìn thấy/tìm thấy 'foo' trong phạm vi con, vì vậy nó tìm nó trong phạm vi cha mẹ (do thừa kế nguyên mẫu) và tìm thấy nó ở đó.

Để xem những gì phạm vi con trông như thế nào, sử dụng fiddle ban đầu của bạn, và thêm mã này vào mẫu của bạn ở đâu đó:

<a ng-click="showScope($event)">show scope</a> 

Và thêm mã này vào Ctrl của bạn:

$scope.showScope = function(e) { 
    console.log(angular.element(e.srcElement).scope()); 
} 

Trước khi bạn nhập vào hộp văn bản, hãy nhấp vào liên kết "hiển thị phạm vi". Trong giao diện điều khiển (tôi đang sử dụng Chrome), bạn có thể mở rộng phạm vi "Con" và thấy nó không chứa thuộc tính testvalue (mà tôi thấy đáng ngạc nhiên, bởi vì tôi không biết nó hiển thị "giá trị ban đầu" như thế nào trong hộp văn bản).Bạn có thể mở rộng $ parent và bạn sẽ thấy thuộc tính testvalue ở đó - một thuộc tính có tên này dường như chỉ nằm trong phạm vi cha mẹ tại thời điểm này.

Bây giờ, hãy xóa bảng điều khiển, nhập vào hộp văn bản và nhấp lại vào liên kết "hiển thị phạm vi". Bạn sẽ thấy rằng phạm vi "Con" hiện có thuộc tính testvalue mới. Nó đổ bóng/ẩn thuộc tính cha. Vì vậy, mọi thứ trong phạm vi con nhìn thấy thuộc tính testvalue phạm vi con, và những thứ trong phạm vi cha mẹ thấy thuộc tính testvalue phạm vi cha mẹ.

Cập nhật: FYI, tôi gần đây đã viết một câu trả lời sâu rộng/bài viết về phạm vi thừa kế nguyên mẫu giải thích các khái niệm trên một cách chi tiết hơn nhiều, với rất nhiều hình ảnh: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?