kích hoạt sự kiện nhấp chuột từ chỉ thị angularjs

Question

Làm cách nào tôi có thể kích hoạt sự kiện nhấp cho các phần tử li chỉ định chỉ mục của chúng từ chỉ thị angularjs? Tôi đã thử sử dụng $ đầu tiên để kích hoạt nhấp chuột cho phần tử đầu tiên, nhưng nó không hoạt động.

Cảm ơn bạn đã được trợ giúp.

Answer 1

Đây có lẽ là một cách khác để bạn đạt được điều này. Vượt qua vào thị cả chỉ số và các mục và để cho các thiết lập chỉ thị html trong một mẫu:

Demo: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

html:

<ul id="thumbnails"> 
    <li class="thumbnail" ng-repeat="item in items" options='#my-container' itemdata='item' index="$index"> 

    </li> 
    </ul> 

js chỉ:

app.directive('thumbnail', [function() { 
    return { 
    restrict: 'CA', 
    replace: false, 
    transclude: false, 
    scope: { 
     index: '=index', 
     item: '=itemdata' 
    }, 
    template: '<a href="#"><img src="{{item.src}}" alt="{{item.alt}}" /></a>', 
    link: function(scope, elem, attrs) { 
     if (parseInt(scope.index) == 0) { 
      angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'}); 
     } 

     elem.bind('click', function() { 
      var src = elem.find('img').attr('src'); 

      // call your SmoothZoom here 
      angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'}); 
     }); 
    } 
} 
}]); 

Bạn có thể sẽ tốt hơn khi thêm một ng-click vào hình ảnh như được chỉ ra trong một câu trả lời khác.

Cập nhật

Liên kết cho bản demo không chính xác. Nó đã được cập nhật thành: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

Answer 2

Đây là chi tiết cách góc để làm điều đó: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. tôi thêm $ scope.selectedItem mà được bạn qua vấn đề đầu tiên của bạn (mặc định hình ảnh)
2. tôi thêm $ scope.setSelectedItem và gọi nó trong ng-click. yêu cầu cuối cùng của bạn có thể khác nhau, nhưng sử dụng một chỉ thị để ràng buộc click và thay đổi src là quá mức cần thiết, vì hầu hết của nó có thể được xử lý với mẫu
3. Thông báo sử dụng ngSrc để tránh các cuộc gọi máy chủ không đúng tiêu chuẩn về tải ban đầu
4. Bạn sẽ cần phải điều chỉnh một số kiểu để có được hình ảnh được định vị ngay trong div. Nếu bạn thực sự cần sử dụng background-image, thì bạn sẽ cần một chỉ thị như ngSrc để ngăn chặn đặt kiểu background-image cho đến khi dữ liệu thực đã được tải.

Answer 3

Đây là phần mở rộng cho câu trả lời của Langdon với phương pháp tiếp cận chỉ thị cho vấn đề. Nếu bạn sẽ có nhiều phòng trưng bày trên trang, đây có thể là một cách để giải quyết nó mà không có nhiều phiền toái.

Cách sử dụng:

<gallery images="items"></gallery> 
<gallery images="cats"></gallery> 

See it working here

Answer 4

Đây là cách tôi đã có thể kích hoạt một nút bấm khi tải trang.

<li ng-repeat="a in array"> 
    <a class="button" id="btn" ng-click="function(a)" index="$index" on-load-clicker> 
    {{a.name}} 
    </a> 
</li> 

Chỉ thị đơn giản lấy chỉ mục từ ng lặp lại và sử dụng điều kiện gọi nút đầu tiên trong chỉ mục và nhấp vào nút khi tải trang.

angular 
    .module("myApp") 
     .directive('onLoadClicker', function ($timeout) { 
      return { 
       restrict: 'A', 
       scope: { 
        index: '=index' 
       }, 
       link: function($scope, iElm) { 
        if ($scope.index == 0) { 
         $timeout(function() { 

          iElm.triggerHandler('click'); 

         }, 0); 
        } 
       } 
      }; 
     }); 

Đây là cách duy nhất tôi có thể kích hoạt tự động nhấp chuột lập trình ngay từ đầu.angular.element(document.querySelector('#btn')).click(); Đã không hoạt động từ bộ điều khiển để làm cho chỉ thị đơn giản này có vẻ hiệu quả nhất nếu bạn đang cố gắng chạy một lần nhấp vào tải trang và bạn có thể chỉ định nút nào cần nhấp bằng cách chuyển vào chỉ mục. Tôi đã được trợ giúp thông qua câu trả lời tràn ngăn xếp này từ một tài liệu tham khảo bài đăng khác: https://stackoverflow.com/a/26495541/4684183 Chỉ thị onLoadClicker.