AngularJS自定義指令，你如何綁定和接受鼠標事件？

我需要接受鼠標點擊一個自定義的DOM元素，其狀態是依賴於模型： -AngularJS自定義指令，你如何綁定和接受鼠標事件？

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

我能夠建立一個通過DOM綁定到一個控制器的範圍內的變量自定義指令屬性和使用他們改變它的觀點。

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

來源

2012-12-08 Tom Larkworthy

如果我理解你想要做什麼，你可以採用NG-風格，而不是看$（）ES，而是NG單擊element.click的（）：

<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的 - 'PX' 添加到NG-風格：

<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。

我想如果我們離開'px'，jQuery更容易理解。

在第二個小提琴中，我還添加了「將卡片向下移動200px」的ng-click /超鏈接，以證明更改模型會導致Angular自動更新視圖。

來源

2012-12-09 03:43:38

哦，這是相當不錯，代碼少。 –

AHHHHH，我有正確的方法，在觀察家雖然打破。顯然，我不完全理解$ watch的語義，因爲我並不完全理解解決方案。我只是通過打印範圍和檢測正確的變量出現在孤立範圍的情況下才意識到它。

無論如何，解決方法：我改變了$手錶來電： -

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

這種跟蹤更改綁定變量

來源

2012-12-08 21:20:18

AngularJS自定義指令，你如何綁定和接受鼠標事件？

回答

相關問題