AngularJSng 클릭으로 두 번 불이 발생

AngularJSng 클릭으로 두 번 불이 발생

ng-click을 사용하고 있는데 SPAN tag에 적용하면 두 번 발화됩니다.

HTML

<div ng-app="regApp" ng-controller="RegistrationCtrl" data-ng-init="GetEventDetail()" ng-show="data.EventName">

    <h2>Registration for {{data.EventName}}</h2>
    <span class="btn" id="btnSave" ng-click="PostRegistration()">Save </span>

</div>

컨트롤러

var app = angular.module('regApp', ['ui']);

app.controller('RegistrationCtrl', function ($scope, $http) {
    $scope.PostRegistration = function () {
    alert('click '); <--- fires twice
    /// some code here -- 
};

한 번만 발사하면 됩니다.이 문제가 발생하는 이유와 해결 방법은 무엇입니까?

제공한 코드에 따라 이벤트가 두 번 발생하지 않습니다.

http://jsfiddle.net/kNL6E/ (클릭)Save)

혹시 앵귤러를 두 번이나 포함시킨 건 아닐까요?이렇게 하면 다음과 같이 두 가지 알림이 표시됩니다.

http://jsfiddle.net/kNL6E/1/

비슷한 문제가 있었는데 파일에 Angular를 두 번 포함한 곳을 찾을 수가 없었습니다.

특정 양식 레이아웃을 로드하기 위해 ajax 호출을 사용하고 있었기 때문에 사용해야 합니다.$compile삽입된 DOM에서 Angular를 활성화합니다.하지만, 저는 사용하고 있었습니다.$compile내 지시에 따라$element컨트롤러가 부착되어 있습니다.이것은 컨트롤러를 두 번 "포함"시켜 두 개의 트리거를 유발하는 것으로 드러났습니다.ng-click아니면ng-submit.

사용해서 고쳤습니다.$compile내 지시 대신에 삽입된 DOM에 직접적으로$element.

사용하는 동일한 문제

<a ng-click="fn()"></a>

fn은 두번이나 불렸습니다.

버튼을 사용하여 고정:

<button ng-click="fn()"></button>

아마 잘 알려지지 않았을 겁니다만, 제가 갖고 있던 건ng-clickBrowserSync를 실행하고 있었기 때문에 두 번 실행할 수 있었습니다. 그러면 입력한 내용이 다른 창에서 열려 있던 탭으로 미러링되어 클릭 수가 두 배가 됩니다.해결하기 위해 "ghostMode"를 해제했습니다: https://www.browsersync.io/docs/options/

필요가 없어서 ngsubmit 핸들러를 제거하여 해결하였습니다.저는 변경 이벤트를 모니터링하고 시그널R을 사용하여 거의 실시간으로 화면을 업데이트하고 있습니다.

저도 형태를 갖추었고 각진 모습을 하고 있었습니다.ngSubmit 상태에 대한 JS 문서:

경고:두 가지를 모두 사용하여 "이중 제출"이 발생하지 않도록 주의하십시오.ngClick그리고.ngSubmit함께 처리해야 합니다.다음 날짜에 대한 자세한 논의는 양식 지침 문서를 참조하십시오.ngSubmit트리거 될 수 있습니다.

동일한 문제를 가진 사람의 경우:이것이 제 문제였습니다.

<a type="submit" ng-click="login()">submit login<a>

둘 다.type="submit"그리고.ng-click="login()"내 컨트롤러에서 로그인 ()-method를 트리거했습니다.

type= submit 또는 ng-click 지시문을 사용하면 됩니다.

다른 답변이 도움이 되지 않으면 Angular를 선택합니다.JS 프로파일링은 Batarang에서 사용할 수 없습니다(물론 설치되어 있는 경우).

이것은 나를 위해 ng-click 두번 발사하는 것이었습니다.

요소가 서로 래핑되며, 이로 인해 트리거 이벤트가 두 번 이상 발생할 수 있습니다.

그래서 저는 이 솔루션에 간단한 CSS 트릭을 사용했습니다.

.off{
   pointer-events:none;
}

클릭 이벤트에 해당하는 요소에 적용합니다.

ang-submit을 사용하여 양식 컨테이너 내부에서 ang-click을 사용할 수 있습니다.이 경우 ng-click을 사용하는 모든 사용자에게 type="button"을 추가합니다.

동적으로 추가된 요소에 대해 $compile을 한 번이 아니라 사이클 내에 여러 번 호출했을 때 받게 되었습니다.한 번만 컴파일하면 이 효과가 제거됩니다.

같은 문제에 직면하고 있었습니다.그들이 https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js 버전을 사용하고 있었다는 것을 알게 되고 나는 그것을 최신 1.4.5 버전으로 바꿨고 그것은 그냥 효과가 있었습니다.

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js

var app = angular.module('regApp', []);

app.controller('RegistrationCtrl', ['$scope','$http',function($scope,$http ) {
  $scope.PostRegistration = function() {
    alert('click '); // <--- fires twice
    /// some code here -- 
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="regApp" ng-controller="RegistrationCtrl">
  <h2 >Registration for {{data.EventName}}</h2>
  <span ng-click="PostRegistration()" class="btn" id="btnSave">Save </span>

</div>

<버튼 ng-click='clickHandler()'>를 <ang-click='clickHandler()'>로 변경하여 이제 이벤트가 한 번만 발생합니다.

SPA(Single Page Applications)에서 부분 뷰를 동적으로 주입할 때 동일한 문제가 발생했습니다.제가 해결한 방법은 제 div의 내용을 다음과 같은 지역 변수에 저장하는 것이었습니다.

var html = $("#leftContainer").html();

그런 다음 div를 비우고 내용을 다음과 같이 재설정합니다.

$("#leftContainer").empty();
$("#leftContainer").append(html);

이제 AJAX 호출이나 동적으로 구성된 추가 HTML을 추가할 수 있으며 마지막으로 HTML을 다시 컴파일하여 각도로 바인딩할 수 있습니다.

var entities = $("#entitiesContainer");

var entity = "<div><a href='#' ng-click='Left(" + entityId + ")'>&nbsp;" + entityName + "</a><div>"
entities.append(entity);

var leftContainer = angular.element(document.getElementById("entitiesContainer"));

$compile(leftContainer)($scope);

나는 약간 바보같은 사람이고 이것을 가지고 있었습니다.

<li data-shape="amethyst" ng-click="toggleGem('amethyst')">
    <label></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

클릭 이벤트가 두 번 트리거되었습니다.ng클릭을 라벨 요소로 이동시켰는데, 예상대로 작동합니다.

<li data-shape="amethyst">
    <label ng-click="toggleGem('amethyst')"></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

이 상황은 Angular의 ngTouch가 부족하여 발생할 수 있습니다.

ngTouch가 로드된 경우 Angular 1.5.0 이전에 ngTouch 및 ngClick 버그가 발생할 수 있습니다.ngClick이 다음에 의해 트리거되어 발생합니다.pointerup그리고.mouseUpChrome for Desktop(데스크톱용 크롬) 도구 모음 또는 모바일 장치에서 사용할 수 있습니다.

저도 이런 문제가 있었습니다.

<button style="width: 100%;" class="btn btn-danger" ng-click="'{{vm.delete()}}'">

ng-click을 그렇게 호출하는 것은 아니지만 오류는 발생하지 않았고 함수 호출은 여전히 작동했습니다.

<button style="width: 100%;" class="btn btn-danger" ng-click="vm.delete()">

맞습니다. 그러면 한 번만 호출됩니다.

이런 일이 일어난 이유가 무엇이었는지는 모르겠지만, 저는 그 일을 이용해야만 했습니다.event.stopPropagation();내 자바스크립트 함수 안에 있습니다.

HTML

<button class="button" ng-click="save($event)">Save</button>

자바스크립트

function save(event) {
    event.stopPropagation();
}

아래 코드로 처리했습니다.

HTML:

<div>
    <ui>
        <li>
            <button class="Button" ng-disabled="self.desableSubmitButton" ng- 
            click="self.SubmitClick($event)">Submit</button>
        </li>
    </ui> 
</div>

각도 1.0 컨트롤러:

_self.SubmitClick = function(event){   
     _self.desableSubmitButton = true; //disable submit button
     event.preventDefault();
     event.stopPropagation();

     setTimeout(funtion() {
       _self.desableSubmitButton = false; //enable submit button after timeout
           if(_self.$scope.$$phase != '$apply' || _self.$scope.$$phase != '$digest'){
             _self.$scope.$digest();
             }
      }, 1000);//other Code logic
}

내 경우:사용자 지정 사용자 지정 각도 확인란 구성 요소에서 ng-click 이벤트를 사용했습니다.따라서 맞춤 구성요소에 대한 방법 바인딩을 제공하는 것만으로도 효과가 있었습니다.

:<mono-checkbox-ng ng-click="vm.onSelectAllClicked()">

:<mono-checkbox-ng on-changed="vm.onSelectAllClicked()">

언급URL : https://stackoverflow.com/questions/18709297/angularjs-ng-click-fires-twice