AngularJS 사용자 지정 지시문을 바인딩하고 마우스 이벤트를 수락하는 방법은 무엇입니까?

Question

나는 그 상태 모델에 의존 마우스 클릭을 허용하는 사용자 정의 DOM 요소를 필요로하고 -

나는 그것의 DOM을 통해 컨트롤러의 범위 변수에 결합하는 사용자 정의 지시어를 구축 할 수 있어요

<card ng-repeat="card in cards" x="card.x" 
    y="card.y" color="card.color" on-click="test_click('b')"> 
</card> 

속성 사용 그들에게보기를 바꾼다. 내가 범위를 주석에 의해 (고립 된 범위를 생성하고 일부 재배 선을 수행하여 컨트롤러까지 전파 마우스 클릭 이벤트를 얻을 수 있어요

app.directive('card', function ($timeout) { 
    return { 
     restrict:'E', 
     link:function (scope, element, attrs) { 
      element.addClass('card'); 

      element.click(function(){ 
       scope.onClick() 
      }); 

      scope.$watch(attrs.x, function (x) { 
       element.css('left', x + 'px'); 
      }); 
      scope.$watch(attrs.y, function (y) { 
       element.css('top', y + 'px'); 
      }); 
      scope.$watch(attrs.color, function (color) { 
       element.css('backgroundColor', color); 
      }); 
     } 
     /* 
     ,scope:{ 
      x:'=', 
      y:'=', 
      color:'=', 
      onClick: "&" 
     } 
     */ 
    }; 
}); 

: 나는 그것의 부모 범위를 상속하는 지시어를 허용하여이 작업을 위에서).

그러나 두 가지 동작을 동시에 수행 할 수는 없습니다.

나는 x 변수를 속성 값에 바인딩해야한다고 가정합니다. 그러나 내가 생각할 수있는 모든 구문 조합을 시도해도, 나는 그것을 작동시키는 것처럼 보이지 않습니다.

여기 완전한 경우 jsfiddle

Answer 1

난 당신이 뭘 하려는지 이해한다면, 당신이 할 수있는 변경 사항을 추적 - : 어쨌든

솔루션 : 나는 $ 시계 변경은 호출 대신 $의 사용 NG 스타일의 시계() ES 및 (element.click 대신 NG 클릭) :

<card ng-repeat="card in cards" ng-click="test_click('b')" 
    ng-style="{left: card.x, top: card.y, 'background-color': card.color}" > 

Fiddle

미리 만들어진 Angular 지시어 (예 : ngStyle, ngRepeat, ngClass, ngSwitch, ngShow) 중 하나를 모델에 연결하면 Angular가 시계를 사용합니다().

는 (. 그것은 단지 내가 jQuery를 포함하면 내가 어떤 jQuery를 특정 메소드가 호출되는 표시되지 않습니다 왜 작동하는지 이해가되지 않습니다.)

업데이트 : 나는 그것이없이 작동하는 방법을 알아 냈어 jQuery를 일 - NG-스타일 'PX'를 추가

<card ng-repeat="card in cards" ng-click="test_click('b') 
    ng-style="{left: card.x + 'px', top: card.y + 'px', 'background-color': card.color}" "> 

Updated fiddle합니다.

jQuery는 'px'를 생략하면 더 용서할 것입니다.

두 번째 바이올린에서 모델 변경으로 Angular가 자동으로보기를 업데이트한다는 것을 증명하기 위해 "move card # 1 down 200px"ng-click/hyperlink를 추가했습니다.

Answer 2

아 ~~~ !!입니다, 나는 전문가가하지만 깨진했다 올바른 접근 방식을 가지고 있었다. 분명히 나는 ​​해결책을 완전히 이해하지 못하기 때문에 $ watch의 의미를 완전히 이해하지 못한다. 나는 범위를 인쇄하고 격리 된 범위의 경우에 올바른 변수가 있음을 발견함으로써 그것을 깨달았습니다.

scope.$watch("x", function (x) { 
    element.css('left', scope.x + 'px'); 
}); 

이것은 바운드 변수