Có vấn đề về phạm vi nếu tôi di chuyển một phần tử từ vùng chứa này sang vùng chứa khác không?

Question

Xét rằng bạn có tình trạng này:

<div class="site-frame"> 
    <div class="auxiliary"></div> 

    <div class="main" ui-view> 
     <div class="componentA"> 
     </div> 

     <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4"> 
      <!-- CONTENTS OF componentB --> 
     </div> 

     <div class="componentC"> 
     </div> 
    </div> 
</div> 

Yếu tố .componentB có một chỉ thị gọi là move-to mà chỉ cần di chuyển các nội dung của nguyên tố này, thu thập chúng với trẻ em jQuery selector đại diện (như var contents = $('.componentB').find('> *');), khi bất kỳ những điểm ngắt này, được định nghĩa trên chỉ thị breakpoints (những con số này là các chỉ mục của một mảng, giữ các phép đo điểm ngắt) hiện đang xảy ra.

Khi một số breakpoint của chỉ thị đang hoạt động, sự thay đổi DOM này:

<div class="site-frame"> 
    <div class="auxiliary"> 
     <!-- CONTENTS OF componentB --> 
    </div> 

    <div class="main" ui-view> 
     <div class="componentA"> 
     </div> 

     <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4"> 
     </div> 

     <div class="componentC"> 
     </div> 
    </div> 
</div> 

Đây là một cơ chế phản ứng đang được sử dụng trong một phiên bản tĩnh của một trang web mà tôi đang đối phó với. Những gì tôi cần là để biết nếu có sai sót với thừa kế phạm vi, phát sóng sự kiện, điều khiển trạng thái, mà đang được liên quan đến div.main, mà chính nó là anh chị em của div.auxiliary.

Tự hỏi về góc làm việc của nó như thế nào, tôi cho rằng lớp logic JS giữ quan hệ giữa phần tử DOM được tham chiếu trên một phạm vi nào đó. Chủ yếu trên các phạm vi chỉ thị, sử dụng các hàm link(), tự nhiên là post-link() do đó thao tác DOM an toàn hơn, bởi vì liên kết đã được tạo.

Hãy nhớ rằng tôi giữ tham chiếu về nội dung .componentB bên trong hàm link(), trong khi nghe sự kiện $destroy phạm vi, để xóa mọi thứ, tránh rò rỉ bộ nhớ. Ngoài ra, vì hệ thống này nghe theo số $window.on('resize') để tìm ra điểm ngắt hiện tại và trong khi điều hướng, có thể nội dung của ví dụ của tôi có thể được di chuyển giữa vùng chứa ban đầu và vùng phụ trợ. Vì vậy, câu hỏi đặt ra là: nếu tôi di chuyển một phần tử thông qua DOM, ngay cả bên ngoài phụ huynh của nó, bạn có thể tiếp tục đếm trên các cập nhật có thể thay đổi về ràng buộc dữ liệu, thừa kế, v.v ... không? Không.

tôi yêu cầu này trước khi thực hiện vì kích thước khổng lồ của ứng dụng, và như mọi khi trên Runnings sản xuất-khôn ngoan, không có chỗ để thảo luận về điều này trước khi ...

Sửa 1:

Tạm thời, CodePen này có nhiều cơ hội hơn: http://codepen.io/anon/pen/JXPvBE?editors=0010

Mã đang làm những gì tôi cần, nhưng tôi cần kiểm tra nó trong ứng dụng cuối cùng.

Answer 1

Trong khi tôi đang phát triển các tác vụ khác, giải pháp được đăng trên Chỉnh sửa 1 của câu hỏi đã chỉ ra cách tốt để giải quyết vấn đề này.

Trong khi một số nghi ngờ về sự tồn tại của bộ điều khiển gốc, của phần tử cha, bằng cách nào đó bị rò rỉ trên tình huống này, có nghĩa là các bản cập nhật khác trên mô hình có khả năng không bị ảnh hưởng với các thay đổi , cho đến bây giờ, không có vấn đề gì được chú ý.

Có lẽ với các tình huống khác, nó có thể thất bại, nhưng bây giờ, nó làm việc tốt:

http://codepen.io/anon/pen/JXPvBE?editors=0010

Trên CodePen, trên đầu chỉ thị move-to, chức năng biên dịch, tại trước liên kết pha, giữ một tham chiếu đến phần tử trong trường hợp, để thao tác nó bằng cách sử dụng hình thức ban đầu của nó, trước khi xử lý góc nó cũng chỉ thị (như ng-repeat), và vì vậy chúng ta sẽ không xử lý những nhận xét góc đó.

<!-- ng-repeat: x in collection --> 
<li class="repeated-element"> 
    ... 
</li> 
<!-- end ng-repeat: x in collection --> 

01 Nó thực sự là một cách tốt để đối phó với một số vấn đề đáp ứng, không có chỗ cho một số chức năng trên SPA và bạn cần phải đặt chúng trong một container phụ trợ, bao gồm toàn bộ trang và đúng nơi những yếu tố cần nhiều hơn nữa chú ý, giống như các ứng dụng gốc trên điện thoại di động, với các mặt bên. +