AngularJS动态添加ngclick

Question

我正在尝试动态添加 ng-click 我知道如何在 Jquery 中完成，但不知道如何在 AngularJs 中完成。我的代码在 canvas 上绘制了一系列点，我希望每个点都可以点击，我不确定如何在 Angular 中完成。

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>

Answer 1

我认为您不应该从 AngularJS 控制器生成视图部件。您应该只生成数据，这些数据可以通过例如 ng-repeat 指令包含在您的 HTML 中，然后创建一个自定义指令来处理数据。

生成的 HTML 可能是这样的：

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

然后创建自定义指令来处理 "my-plot" 或 "my-graph" 元素。 Official documentation.

很好的解释和例子here。

自定义指令的原理是处理属性或在您的情况下 HTML 元素，以更改某些内容：您可以枚举它们的 children，将元素 "my-graph" 完全替换为完全不同 HTML.

创建自定义指令并不容易。一旦你想包含一个 "ng-click"，这是另一个指令，你必须相应地管理优先级："ng-click" 指令必须在你的自定义指令之后执行。

Answer 2

不确定你的推理是否正确，但无论如何...... 我相信你想使用 $compile 服务

AngularJS动态添加ngclick

AngularJS dynamically add ngclick

angularjs

angularjs-ng-click