2014-09-03 2 views
0

모난 스트랩 모달에 angularStrap 선행 표시가 있는데, 모달이 작성된 이후에 모달이 열리거나 닫힌 것처럼 변경 이벤트가 반복되는 것을 제외하고는 선행 검사가 올바르게 작동합니다 .모달 트리거가 각각 여러 번 변경되는 모달 트리거

모달이 표시 될 때마다 청취자가 추가 된 것처럼 보이지만이 문제를 해결할 방법을 찾을 수 없습니다. 버그는 아니지만 제 편이 오용 된 것 같습니다.

는 예를 들어, 모달가 열려있는 경우는 ...

typehead에서 4 번째로 개방하고 입력 각 입력 문자의 getParentItem 핸들러에 4 전화 (여기 아래 참조) 트리거됩니다, 3 회 폐쇄

  • getParentItem =이 내 첫 번째 질문이지만 크롬 콘솔 (숫자가 동일 로그의 수를 시각적으로 파란색 원으로 제시 행에) 이런 식으로 뭔가를 제공하기 때문에

    아직 이미지를 게시 할 수 없습니다 > 정의되지 않음

  • getParentItem => I
  • getParentItem => 그
  • getParentItem => ITE
  • 2 getParentItem => 미정
  • 2 getParentItem => I
  • 2 getParentItem => 그
  • 2 getParentItem => ITE
  • getParentItem 3 => 미정
  • getParentItem 3 => 제가
  • getParentItem 3 => 그,778,853,210
  • 3 getParentItem => ITE
  • 4 getParentItem => 미정
  • 4 getParentItem =>
  • 4 getParentItem => 그
  • 4 getParentItem =>

ITE 봉투 I :

  • AngularJS v1.3.0-build.3029 + sha.7df7d1a
  • 하지에 확실하게 나는 그런 식으로 처리 모달을 변경 한 module.js에서 을 : -AngularStrap의 @version의 V2.0.5 2014년 8월 7일

코드는 다음과 같습니다 매번 모달을 다시 만들고 여러 인스턴스가 있어야합니다. 문제는 어느 쪽이든 마찬가지입니다.

... 
/** 
* Edit item creating modal if required 
*/ 
$scope.editItem = function(event) { 
    if ('undefined' === typeof this.modalEdit) { 
    this.modalEdit = $modal({ 
     scope: this, 
     animation: 'am-fade-and-scale', 
     title: 'Insert/Edit Item', 
     template: 'partials/item.html', 
     show: false 
    }); 
    } 
    this.showModalEdit(); 
}; 
/* 
* Show edition modal 
*/ 
$scope.showModalEdit = function() { 
    this.modalEdit.$promise.then(this.modalEdit.show); 
}; 
/* 
* Hide edition modal 
*/ 
$scope.hideModalEdit = function() { 
    if ('undefined' !== typeof $scope.modalEdit) { 
    $scope.modalEdit.hide(); 
    } 
}; 
/* 
* Propose parent items according val 
*/ 
$scope.getParentItem = function(val) { 
    console.info('getParentItem => ' + val); 
    if ('undefined' !== typeof val && 2 < val.length) { 
    $http.get('/api/items/' + val, {}) 
     .success(function(data, status, headers, config) { 
     console.log('success'); 
     }) 
     .error(function(data, status, headers, config) { 
     console.log('error'); 
     }); 
    } 
}; 
... 

그리고 모달 템플릿 항목에

.HTML

<div class="modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
    <form method="post" ng-submit="upsert()" ng-controller="ItemCtrl"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <h3 class="modal-title" ng-bind="title"></h3> 
     </div> 
     <div class="modal-body"> 
      ... 
      <div class="form-group"> 
      <h5>Parent Item</h5> 
      <input class="form-control input-sm" type="text" ng-model="item.parent" name="parent" data-animation="am-flip-x" data-limit="25" ng-options="item.uid as item.label for parent in getParentItem($viewValue)" placeholder="Select a parent item" bs-typeahead required autofocus> 
      </div> 
      ... 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-sm" ng-click="$hide()">Cancel</button> 
      <button type="submit" class="btn btn-primary btn-sm">Validate</button> 
     </div> 
     </div> 
    </form> 
    </div> 
</div> 

이미이 reusing modal fires multiple times 제외하고는 있지만 후속으로 어디서나에 대한 내 코드를 여러 번 리팩토링이 문제에 많은 시간을 보냈다 아무것도 발견 한 이후 어떤 생각이 ...

환영합니다

답변

0

내 콘솔에서 여러 번 테스트하고 몇 시간을 거친 후에 모달의 새 범위를 만들면 문제가 해결된다는 사실을 발견했습니다. 아마도 각도 및 상속 동작 범위 관리로 인해 아직 완전히 이해하지 못했을 것입니다. 내가 전에 그랬던 것처럼

설명 (관찰하지만 완전히 이해되지 않음)

모달의 컨트롤러 범위 자체를 사용 ("범위 :이"또는 "범위 : $의 범위")에 대해 동일 $$ 전문가 결과 스코프는 모달 (모달 속성의 관찰자)을 열 때마다 겹쳐 쌓여 있었고 이전 이벤트는 공개/삭제되지 않았으며 동일한 이벤트를 트리거하는 모달의 일부 열기/닫기 후에 수십/수백 $ $ 관찰자로 끝났습니다.

참고 : 각 범위에서이 여행하는 동안

  • , 나는 또한 모달 범위에서 주요 범위 (getParentItem 예를 들어)의 함수를 호출 할 때보다 발견, "$ 범위는"메인으로 다스 려했다 "this"가 로컬 범위 자체 (즉, 모달 또는 제어 하위 범위)를 참조하는 동안 이것은 논리적 인 것처럼 보입니다. 지시문에서 범위 생성 프로세스를 완전히 이해하지 못했습니다 ... 예를 들어 열심히 읽으려고 시도 : https://github.com/angular/angular.js/wiki/Understanding-Scopes 또는 http://thenittygritty.co/angularjs-pitfalls-using-scopes,하지만 지금은 나에게 도움이 될 것입니다.
  • 하나의 모달을 만들고 사용하는 데 더 이상 신경 쓰지 않아도됩니다. 메모리 사용과 관련하여 안전하지는 않지만 모달 메서드 자체를 통해 새 범위가 제공됩니다.
  • modalEdit도 var가되었고 scope 속성이 아닙니다.
  • upsert 프로세스에서 모듈/컨트롤러/서비스와 다른 상호 작용이 있었기 때문에 (예 : ng 컨트롤러에서 바인딩) 모달에 대한 특정 컨트롤러를 만들지 않았습니다. 각도를 사용하는 첫 번째 프로젝트이므로 지식이 부족하기 때문에 쉽게 해결할 수 없습니다.

나를 위해 작업 코드는 다음과 같습니다

$scope.editItem = function(item) { 
    var editionScope = $scope.$new(true); 
    editionScope.getParentItem = $scope.getParentItem; 
    editionScope.upsertItem = $scope.upsertItem; 
    editionScope.modes = $scope.modes; 
    editionScope.item = item; 
    modalEdit = $modal({ 
    scope: editionScope, 
    animation: 'am-fade-and-scale', 
    title: 'Item Edition', 
    template: 'partials/item.html', 
    show: true 
    }); 
}; 
관련 문제