Chỉ thị cách ly phạm vi với phạm vi ng-repeat trong AngularJS

Tôi có một chỉ thị với phạm vi cô lập (để tôi có thể sử dụng lại chỉ thị ở những nơi khác) và khi tôi sử dụng chỉ thị này với một ng-repeat, nó không hoạt động.

Tôi đã đọc tất cả tài liệu và câu trả lời về Stack Overflow về chủ đề này và hiểu các vấn đề. Tôi tin rằng tôi đã tránh được tất cả các lỗi thông thường.

Vì vậy, tôi hiểu rằng mã của tôi không thành công do phạm vi được tạo bởi ng-repeatchỉ thị. Chỉ thị của riêng tôi tạo một phạm vi cô lập và thực hiện liên kết dữ liệu hai chiều với một đối tượng trong phạm vi chính. Chỉ thị của tôi sẽ gán một đối tượng-giá trị mới cho biến bị ràng buộc này và điều này hoạt động hoàn hảo khi chỉ thị của tôi được sử dụng mà không có ng-repeat(biến cha được cập nhật chính xác). Tuy nhiên, với ng-repeat, phép gán tạo ra một biến mới trong ng-repeatphạm vi và biến cha không thấy sự thay đổi. Tất cả điều này là như mong đợi dựa trên những gì tôi đã đọc.

Tôi cũng đã đọc rằng khi có nhiều chỉ thị trên một phần tử nhất định, chỉ một phạm vi được tạo. Và a prioritycó thể được đặt trong mỗi chỉ thị để xác định thứ tự áp dụng các chỉ thị; các chỉ thị được sắp xếp theo mức độ ưu tiên và sau đó các hàm biên dịch của chúng được gọi (tìm kiếm từ ưu tiên tại http://docs.angularjs.org/guide/directive ).

Vì vậy, tôi hy vọng mình có thể sử dụng mức độ ưu tiên để đảm bảo rằng chỉ thị của tôi chạy trước và kết thúc việc tạo phạm vi cô lập và khi ng-repeatchạy, nó sử dụng lại phạm vi cô lập thay vì tạo phạm vi kế thừa nguyên mẫu từ phạm vi mẹ. Các ng-repeattiểu bang tài liệu mà chạy chỉ ở mức ưu tiên 1000. Không rõ 1là mức ưu tiên cao hơn hay mức ưu tiên thấp hơn. Khi tôi sử dụng mức độ ưu tiên 1trong chỉ thị của mình, nó không tạo ra sự khác biệt, vì vậy tôi đã thử 2000. Nhưng điều đó làm cho mọi thứ trở nên tồi tệ hơn: ràng buộc hai chiều undefinedcủa tôi trở nên và chỉ thị của tôi không hiển thị bất cứ điều gì.

Tôi đã tạo một trò chơi để hiển thị sự cố của mình . Tôi đã nhận xét về prioritycài đặt trong chỉ thị của tôi. Tôi có một danh sách các đối tượng tên và một lệnh được gọi name-rowđể hiển thị các trường họ và tên trong đối tượng tên. Khi một tên hiển thị được nhấp vào, tôi muốn nó đặt một selectedbiến trong phạm vi chính. Mảng tên, selectedbiến được chuyển tới name-rowchỉ thị bằng cách sử dụng liên kết dữ liệu hai chiều.

Tôi biết cách làm cho điều này hoạt động bằng cách gọi các hàm trong phạm vi chính. Tôi cũng biết rằng nếu selectedở bên trong một đối tượng khác, và tôi liên kết với đối tượng bên ngoài, mọi thứ sẽ hoạt động. Nhưng tôi không quan tâm đến các giải pháp đó vào lúc này.

Thay vào đó, những câu hỏi tôi có là:

• Làm cách nào để ngăn ng-repeatviệc tạo một phạm vi kế thừa nguyên mẫu từ phạm vi chính và thay vào đó, nó sử dụng phạm vi cô lập của chỉ thị của tôi?
• Tại sao mức độ ưu tiên 2000trong chỉ thị của tôi không hoạt động?
• Sử dụng Batarang, có thể biết loại phạm vi đang sử dụng không?

Được rồi, thông qua rất nhiều ý kiến ​​ở trên, tôi đã phát hiện ra sự nhầm lẫn. Đầu tiên, một số điểm cần làm rõ:

• ngRepeat không ảnh hưởng đến phạm vi cô lập đã chọn của bạn
• các tham số được truyền vào ngRepeat để sử dụng trên các thuộc tính của chỉ thị của bạn sử dụng phạm vi được kế thừa theo nguyên mẫu
• lý do khiến chỉ thị của bạn không hoạt động không liên quan gì đến phạm vi cô lập

Dưới đây là một ví dụ về cùng một mã nhưng đã loại bỏ chỉ thị:

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Đây là một JSFiddle chứng minh rằng nó sẽ không hoạt động. Bạn nhận được kết quả chính xác giống như trong chỉ thị của bạn.

Tại sao nó không hoạt động? Vì phạm vi trong AngularJS sử dụng kế thừa nguyên mẫu. Giá trị selectedtrên phạm vi cha của bạn là giá trị nguyên thủy . Trong JavaScript, điều này có nghĩa là nó sẽ bị ghi đè khi một phần tử con đặt cùng một giá trị. Có một quy tắc vàng trong phạm vi AngularJS: các giá trị mô hình phải luôn có một .trong đó. Đó là, chúng không bao giờ nên là nguyên thủy. Xem câu trả lời SO này để biết thêm thông tin.

Đây là hình ảnh về những phạm vi ban đầu trông như thế nào.

Sau khi nhấp vào mục đầu tiên, các phạm vi bây giờ trông như thế này:

Lưu ý rằng một thuộc tính mới selectedđã được tạo trên phạm vi ngRepeat. Phạm vi bộ điều khiển 003 không được thay đổi.

Bạn có thể đoán điều gì sẽ xảy ra khi chúng ta nhấp vào mục thứ hai:

Vì vậy, vấn đề của bạn thực sự không phải do ngRepeat gây ra - mà là do vi phạm quy tắc vàng trong AngularJS. Cách để khắc phục nó là chỉ cần sử dụng một thuộc tính đối tượng:

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Đây là JSFiddle thứ hai cho thấy điều này cũng hoạt động.

Dưới đây là những gì phạm vi trông giống như ban đầu:

Sau khi nhấp vào mục đầu tiên:

Ở đây, phạm vi bộ điều khiển đang bị ảnh hưởng, như mong muốn.

Ngoài ra, để chứng minh rằng điều này sẽ vẫn hoạt động với chỉ thị của bạn với một phạm vi cô lập (bởi vì, một lần nữa, điều này không liên quan đến vấn đề của bạn), đây cũng là một JSFiddle cho điều đó, chế độ xem phải phản ánh đối tượng. Bạn sẽ lưu ý rằng thay đổi cần thiết duy nhất là sử dụng một đối tượng thay vì một nguyên thủy .

Phạm vi ban đầu:

Phạm vi sau khi nhấp vào mục đầu tiên:

Để kết luận: một lần nữa, vấn đề của bạn không phải với phạm vi cô lập và không phải với cách hoạt động của ngRepeat. Vấn đề của bạn là bạn đang vi phạm một quy tắc được cho là dẫn đến vấn đề này. Các mô hình trong AngularJS phải luôn có một ..

Nếu không trực tiếp cố gắng tránh trả lời các câu hỏi của bạn, thay vào đó hãy xem các câu hỏi khó sau:

http://jsfiddle.net/dVPLM/

Điểm mấu chốt là thay vì cố gắng chống lại và thay đổi hành vi thông thường của Angular, bạn có thể cấu trúc chỉ thị của mình để làm việc thay ng-repeatvì cố gắng ghi đè nó.

Trong mẫu của bạn:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

Trong chỉ thị của bạn:

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

Để trả lời câu hỏi của bạn:

• ng-repeat sẽ tạo một phạm vi, bạn thực sự không nên cố gắng thay đổi điều này.
• Ưu tiên trong các chỉ thị không chỉ là thứ tự thực thi - hãy xem: AngularJS: Trình biên dịch HTML sắp xếp thứ tự biên dịch như thế nào?
• Trong Batarang, nếu bạn kiểm tra tab hiệu suất, bạn có thể thấy các biểu thức được ràng buộc cho từng phạm vi và kiểm tra xem điều này có phù hợp với mong đợi của bạn không.