2015-12-18 6 views
0

Я пытаюсь добавить динамический ng-click. Я знаю, как это можно сделать в JQuery, но не знаю, как это сделать в AngularJs. Мой код отображает серию точек на холсте, и я хочу, чтобы каждая точка была интерактивной, я не уверен, как это можно сделать в Angular.AngularJS динамически добавляет ngclick

AngularJS Код:

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

$scope.data = [ 
      [21,50], 
      [30,150], 
      [45,75], 
      [98,121], 
      [67,78], 
      [35,80] 
     ]; 

$scope.addData = function() { 
    for(i=0; i<$scope.data.length; i++){  
     context.beginPath(); 
     context.arc($scope.data[i][0], $scope.data[i][1], 10, 0, 2*Math.PI); 
     context.fillStyle = "#ccddff"; 
     context.fill(); 
     context.lineWidth = 1; 
     context.strokeStyle = "#666666"; 
     context.stroke(); 
     }  
    } 

HTML код:

<canvas id="canvas" style="border: 1px gray solid; float: left;> width:500px; height:500px;"></canvas> 
+0

Вы пытаетесь добавить событие щелчка на объекте холст дуги? Если это так, вы можете записать событие «ng-click» на элемент DOM холста, и поскольку холст является статическим элементом, это не составит труда сделать это. См. Дополнительную информацию: http://stackoverflow.com/questions/19133825/add-click-event-to-canvas-or-make-area-map –

ответ

0

Я думаю, что вы не должны генерировать вид деталей из контроллера AngularJS. Вы должны генерировать данные, которые могут быть включены в ваш HTML, например, директиву ng-repeat, а затем создать настраиваемую директиву для обработки данных.

Сгенерированный HTML может быть так:

<my-graph> 
    <my-plot ng-repeat="MyPlotCollectionInMyController" /> 
</my-graph> 

Затем создайте пользовательскую директиву для обработки «мой-сюжет» или элементы «мой-граф». Official documentation.

Очень хорошее объяснение и примеры here.

Принцип пользовательской директивы заключается в обработке атрибутов или в ваших элементах HTML-кода, чтобы что-то изменить: вы можете перечислить их детей, полностью заменить элемент «my-graph» совершенно другим HTML.

Не так просто создать пользовательскую директиву. И как только вы захотите включить «ng-click», что является другой директивой, вы должны соответственно управлять приоритетами: директива «ng-click» должна быть выполнена после вашей настраиваемой директивы.

0

не уверен, если вы рассуждаете правильно, НО все равно ... Я считаю, что вы хотите использовать $ компилировать сервис

Смежные вопросы