結合Angular指令，特別是ng-mousemove自定義指令

好吧，這是一個非常基本的問題。 我想要的是一個帶有模板畫布標籤的指令，以及相對於畫布提供鼠標/觸摸座標的事件。我可以在鏈接功能中使用jQuery，但似乎每個人都認爲這是作弊。我知道我並不清楚角度指令如何在相同的元素上相互作用，而且圖像對我有很大的幫助。結合Angular指令，特別是ng-mousemove自定義指令

來源

2014-01-29 Weavermount

我會建議做一個小提琴，回來一個更具體的問題。先試試自己吧。 –

冒着失去更多的代表我會在這裏說話，我得到了它的工作，但它感覺不對。我在atm中做的是從鏈接函數向控制器範圍添加一個函數，然後從我在模板中添加的指令調用該函數。我不覺得我應該像這樣混淆控制器。但它的作品和名稱空間應該可以防止任何衝突 – Weavermount

好吧，我會採取刺。如果這不是你想要的，請澄清。

接下來是一個編譯成畫布的原始指令，處理鼠標移動和鼠標點擊事件。

該指令是這樣的：

app.directive('myCanvas', function() { 

return { 
    replace: true, 
    restrict: 'E', 
    templateUrl: 'my-canvas-template.html', 
    link: function (scope, elem, attr) { 

    } 
};  
});

模板的樣子：

<div> 
<canvas style="border:1px solid #000000;width:'400px';height:'400px" ng-mousemove="moved = moved + 1" ng-click="clicked = clicked + 1"> 
</canvas> 
<p>Mouse moves: {{ moved }}</p> 
<p>Mouse clicks: {{ clicked }}</p> 
</div>

看到它在行動here。希望這有助於...

來源

2014-01-29 07:08:56

謝謝你。我確實得到了角色團隊的ngMousemove示例工作。我認爲問題在於我希望attr值中的函數調用是「在指令上」的一些方法。現在他們在控制器範圍內評估，所以你必須用指令中的隨機方法來混淆你的範圍，我只是不喜歡這種感覺，但我想這就是它的樣子 – Weavermount

添加一些我們可以工作的代碼示例用。 –

結合Angular指令，特別是ng-mousemove自定義指令

回答

相關問題