각도가있는 래칫 토글 구성 요소 사용

Question

저는 래칫 및 각도를 사용하여 모바일 앱을 제작하고 있으며 개발이 빠르고 빠르습니다.

그러나 토글을 사용할 때 많은 문제가 발생했습니다. 상태가 활성화되면 래칫이 div에 "활성"클래스를 추가합니다 그러나이 코너의 외부에서 수행되는

<div class="toggle"> 
    <div class="toggle-handle"></div> 
</div> 

을, 내 시도는이 변경에 실패했습니다 볼 $에 대한 지침을 만들 수 있도록. 또한 테스트하지는 않았지만 ngClass는 클래스가 Angular 외부에 추가 된 경우 모델을 업데이트하지 않습니다.

래칫의 toggle.js에는 상태가 변경 될 때 발생하는 이벤트 리스너가 있지만 각도 외의 javascript뿐만 아니라 jQuery도 사용하지 않으므로이 콜백을 추가하는 방법을 모르겠습니다. ng-view 내부에로드 된 뷰로부터 콜백으로부터 컨트롤러 스코프를 변경한다.

도움을 주시면 감사하겠습니다.

HTML :

<div id="variable" class="toggle" my-toggle> 
    <div class="toggle-handle"></div> 
</div> 

JS를 :

app.directive('myToggle', [function() { 

    function link(scope, element, attrs) { 
     scope.$watch(function() { 
      return element.hasClass('active'); 
     }, function(value) { 
      var id = element.attr('id'); 
      scope.save(id, value); 
     }); 
    } 

    return { 
     restrict: 'A', 
     scope: false, 
     link: link 
    }; 
}]); 

래칫은 active 클래스에 전환 @kindasimple가 제안

Answer 1

은 결국 나는 래칫 핸들러의 인식, 지시어 내 문제를 해결 클릭 및 터치가 있었기 때문에 내 주요 아이디어는 $ watch()로 변경되었습니다. 내 지시문에 격리 된 범위가 필요하지 않았으므로 컨트롤러의 범위에서 변수를 업데이트하기 위해 각각 토글해야합니다. 따라서 scope: false입니다.

내 특정 코드에서 scope.save()은 변수를 저장하는 컨트롤러 기능이므로 해당 변수와 요소 id을 사용하여 상태를 저장할 수 있습니다. 그러나 이전 솔루션에서는 컨트롤러 내부에 $scope.$apply()을 사용하여 Angular가 $digest()주기를 실행하도록하고 지시문에 대해 scope.$watch()을 호출했습니다.