Question

我试图动态添加ng-click我知道如何在Jquery中完成它但不知道我将如何在AngularJs中执行此操作。我的代码在画布上绘制了一系列点，我希望每个点都可以点击，我不确定如何在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 code：

<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元素，以改变一些东西：你可以枚举他们的孩子，用完全不同的HTML完全替换元素“my-graph”。

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

Answer 2

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

AngularJS动态添加ngclick

2 个答案: