angularjs 지시문에서 클릭 이벤트 트리거

angularjs 지시문에서 클릭 이벤트 트리거

angularjs 지시문에서 인덱스를 지정하는 li 요소에 대해 클릭 이벤트를 트리거하려면 어떻게 해야 합니까?$first를 사용하여 첫 번째 요소를 클릭하려고 했지만 작동하지 않습니다.

도와주셔서 감사합니다.

이것을 실현하기 위한 다른 방법이 있을지도 모릅니다.인덱스와 항목을 모두 디렉티브로 전달하고 디렉티브가 템플릿에 html을 설정하도록 합니다.

데모: 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 디렉티브:

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 +')'});
        });
    }
}
}]);

다른 답변에서 지적한 바와 같이 이미지에 ng클릭을 추가하는 것이 좋습니다.

갱신하다

데모 링크가 올바르지 않습니다.http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview 로 업데이트 되었습니다.

이것은 Angular의 방법에 더 가깝습니다.http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. $scope 추가했습니다.선택된첫 번째 문제를 해결하는 항목(이미지 기본값)
2. $scope 추가했습니다.set Selected(선택)아이템과 콜인ng-click최종 요건은 다를 수 있지만 명령어를 사용하여 바인드합니다.click및 변경src대부분 템플릿으로 처리할 수 있기 때문에 과잉 살상이었습니다.
3. 초기 로드 시 오류 서버 호출을 방지하기 위해 ngSrc 사용 주의
4. 이미지를 div에 올바르게 배치하려면 몇 가지 스타일을 조정해야 합니다.꼭 사용해야 하는 경우background-imagengSrc와 같은 명령어가 필요합니다.이 명령어는 ngSrc의 설정을 지연시킵니다.background-image실제 데이터가 로드될 때까지 스타일을 지정합니다.

이것은 문제에 대한 직접적인 접근법에 대한 Langdon의 답변의 연장선입니다.페이지에 갤러리가 여러 개 있는 경우, 이것은 크게 동요하지 않고 진행할 수 있는 한 가지 방법입니다.

사용방법:

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

여기를 봐주세요

이렇게 하면 페이지가 로드될 때 버튼을 클릭할 수 있습니다.

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

ng-repeat에서 인덱스를 가져와 인덱스의 첫 번째 버튼을 호출하고 페이지가 로드될 때 클릭하는 조건을 사용하는 단순한 지시어입니다.

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);
                    }
                }
            };
        });

이게 프로그램적으로 자동클릭을 시작할 수 있는 유일한 방법이에요. angular.element(document.querySelector('#btn')).click(); 컨트롤러에서는 동작하지 않기 때문에 페이지 로드에서 클릭을 실행하려고 할 때 인덱스를 전달하여 클릭할 버튼을 지정할 수 있는 경우 이 간단한 지시문을 작성하는 것이 가장 효과적입니다.다른 포스트 레퍼런스인 https://stackoverflow.com/a/26495541/4684183 onLoadClicker Directive에서 스택에 관한 답변을 통해 도움을 받았습니다.

언급URL : https://stackoverflow.com/questions/16151595/trigger-click-event-from-angularjs-directive