Góc giao diện người dùng-Router ui-sref bỏ qua một số thành phần

Question

Tôi có một vấn đề thú vị với chỉ thị uiSref và tôi đã không thể tìm thấy giải pháp (dù sao cũng thanh lịch) ở bất cứ đâu trên web. Về cơ bản tôi có một yêu cầu từ một khách hàng để có thể nhấp vào một hàng trong một bảng tài nguyên và đi đến chế độ xem chỉnh sửa cho tài nguyên đó. Thông thường, chỉ thị uiSref hoạt động rất đẹp, nhưng vấn đề nằm trong thực tế là tôi có một trình đơn thả xuống Bootstrap trong <td> cuối cùng của bảng với một loạt các hành động nhanh chóng trong đó. HTML trông giống như sau:

<table class="table table-bordedered table-hover"> 
    <thead> 
    <tr> 
     <td>Name</td> 
     <td>Actions</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="resource in resources" ui-sref="edit({id: resource.id})"> 
     <td ng-bind="resource.name"></td> 
     <td class="actions-column"> 
     <div class="btn btn-xs btn-default" data-toggle="dropdown"> 
      <i class="fa fa-cog"></i> 
     </div> 
     <ul class="dropdown-menu pull-right"> 
      <li> 
      <a href="javascript:void(0)" ng-click="doSomethingCrazy(resource)">SOMETHING CRAZY</a> 
      </li> 
     </ul> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Vấn đề là khi tôi nhấp vào nút trong cột hành động, các uiSref đè hành động mặc định của menu thả xuống và đưa tôi đến trang chỉnh sửa. Bây giờ bạn có thể tự hỏi bản thân mình "thật là dễ dàng, tại sao bạn không thể dừng việc tuyên truyền sự kiện này?" ... không hoạt động. Khi tôi thêm cột này vào cột hành động:

<td class="actions-column" ng-click="$event.stopPropagation()"> 

Nó giết chức năng của trình đơn thả xuống và không có gì hiển thị. Ngay bây giờ tôi có một cách giải quyết ở nơi mà tôi xác định một ngClick trên các yếu tố <tr> mà sau đó giải mã nơi mà nhà nước nên đi tùy thuộc vào yếu tố nhấp như vậy:

<tr ng-repeat="resource in resources" ng-click="goToEdit(resource, $event)"> 

And The JS trông như thế này:

scope.goToEdit = function(resource, event) { 
    // if the event.target has parent '.actions-column' or is that column, do nothing else 
    // invoke $state.go('edit', {id: resource.id}) 
} 

Tôi ghét điều này và tôi có nhiều lượt xem danh sách như thế này. Tất cả những gì tôi đang tìm kiếm là một giải pháp thanh lịch và di động mà hy vọng hoạt động nguyên bản thông qua giao diện người dùng Router như $event.stopPropagation() (Mặc dù tôi đã chọc qua nguồn bộ định tuyến UI và dường như không tìm được giải pháp thay thế khả thi). Về cơ bản tôi muốn có bánh của tôi và ăn nó quá. Dù sao, nó sẽ là thú vị để xem những gì cộng đồng SO có thể đưa ra hoặc nếu những gì tôi yêu cầu là không phải là hiện tại có thể. Cảm ơn!

Answer 1

Tôi hiểu rồi! Trong khi xem xét thông qua nguồn Bộ định tuyến UI một chút nữa, có vẻ như sự kiện nhấp sẽ bị bỏ qua nếu thuộc tính target được điền trên phần tử mà uiSref nằm trên đó. Nó có thể không phải là điều đẹp nhất trên thế giới, nhưng nó chắc chắn là dễ dàng hơn những gì tôi đã làm trước đây.

LƯU Ý: này chỉ hoạt động nếu bạn đang sử dụng toàn bộ thư viện jQuery, không jQLite

Vì vậy, tôi viết chỉ thị này:

app.directive('uiSrefIgnore', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attrs) { 
     elem.on('click', function(e) { 
     // Find the ui sref parent 
     var uiSref = elem.parents('[ui-sref]').first(); 
     // Set the target attribute so that the click event is ignored 
     uiSref.attr({ 
      target: 'true' 
     }); 
     // Function to remove the target attribute pushed to the bottom 
     // of the event loop. This allows for a digest cycle to be run 
     // and the uiSref element will be evaluated while the attribute 
     // is populated 
     setTimeout(function() { 
      uiSref.attr({ 
      target: null 
      }); 
     }, 0); 
     }); 
    } 
    }; 
}); 

Bằng cách đó, bất cứ khi nào tôi muốn bỏ qua javascript sự kiện cho chỉ thị uiSref, tôi chỉ có thể thêm video này vào html:

<tr ui-sref="edit"> 
    <!-- any other elements --> 
    <td ui-sref-ignore>The element I care about</td> 
</tr> 

BOOM! Hãy cho tôi biết những gì các bạn nghĩ về những tác động của điều này.