我如何将一个单独的Javascript代码实例附加到N个角度视图

Question

我有一些使用画布绘制图的HTML5代码。 我正在尝试创建一个Angular SPA，它将基于具有N个对象的模型绘制这些图形中的N个。 这是我所做的简化版本。

创建了一个由N个对象组成的数组的Controller。 （名称和值）。
创建了一个名为ccGraph的自定义Angular指令，该指令引入了HTML 5模板。
使用ng-repeat创建N个包含ccGraph元素的div。 （连接中的ng-repeat conn）

我在连接所有东西时遇到了概念上的问题。 如果我只是将{{conn.name}}放在HTML模板中，则该名称将正确显示在每个ccGraph div中。

我的问题是我不知道如何将我的Javascript代码实例附加到每个ccGraph div上进行绘图。 Javascript代码从找到其嵌入的画布开始，然后从那里开始工作。

Angular会为ccGraph的每个实例创建一个单独的Javascript代码实例吗？
我该如何使用包含div的名称来“初始化” JavaScript代码？ （在我的独立HTML代码中，我使用onLoad（）来完成所有初始绘制。）

好的，从代码的角度来看，我有工作索引。

<BODY  onload="initialise();" >
<div class="usageMeter" width="200px" height="500px" > 
    <canvas id="testIndicator" class="usageScale" width="200px" height="500px" >
        Fallback content, in case the browser does not support Canvas.
    </canvas>

和绘制图形的Javascript代码，如下所示：

function initialise() {
mCanvas = document.getElementById("testIndicator");
ctx = mCanvas.getContext("2d");
ctx.translate(0.5, 0.5);
scaleWidth = mCanvas.width * 0.4;
scaleHeight = mCanvas.height * 0.8;
scaleX = mCanvas.width * 0.25;
scaleY = mCanvas.height * 0.1;

loadImages();
drawScale();
elapsedTime = 0.0;
oldElapsedTime = 0.0;
tid = setInterval(updateTime, tickInterval);
}

现在，我想使用Angular SPA绘制这些图中的N张。 因此，我们只能说我的Angular代码尚未启动。 从概念上讲，我如何将上述代码转换为由Angular模型驱动的Angular指令？

Answer 1

您应该考虑使用指令来实现此目的。 在角度1中，这是将行为附加到DOM元素的方式。 它们也可以被实例化多次，例如在ng-repeat中 。

在您的特殊情况下，要制定能够在画布上绘制的指令。 我会这样处理。

 app.directive('painter', function($interval) { return { restrict: 'E', templateUrl: 'painter.html', // the template to instantiate scope: { stuffToDraw: '=' // bind(2-way-binding) the stuff-to-draw attribute on the host element to scope.stuffToDraw (via reference) }, // the link function gets called once for the directive // it is usually used in directives that do dom manipulation directly // will most likely be deprecated in angular 1.5 link: function(scope, element, attrs) { // get the canvas from the template and the context to draw on the angular way // element is the host element of the directive var canvasCtx = element.children()[0].getContext('2d'); canvasCtx.fillStyle = "red"; var rotate = 0; var textToDraw = ''; // add a watcher on the value in the scope so we know if/when it changes scope.$watch('stuffToDraw', function(newValue, oldValue) { if (newValue) { // 1st time it will be undefined textToDraw = newValue; } }); // save the interval promise so we can cancel it later when the directive is destroyed var intervalPromise = $interval(function() { rotate++; drawStuff(); }, 30); // when the scope is destroyed (eg the element is removed from dom) stop the interval scope.$on('$destroy', function() { $interval.cancel(intervalPromise); }); function drawStuff(newValue) { canvasCtx.clearRect(0, 0, 200, 500); canvasCtx.save(); canvasCtx.translate(10, 200); canvasCtx.rotate(rotate); canvasCtx.translate(-10, -200); canvasCtx.fillText(textToDraw, 10, 200); canvasCtx.restore(); } } } });

 <!-- painter.html --> <!-- this content will be inserted in the painter(host) element --> <canvas class="usageScale" width="200px" height="500px"> Fallback content, in case the browser does not support Canvas. </canvas>

 <!-- main/usage --> <!-- itterate over the values array and instantiate a directive for each value. bind the array elements as the stuff-to-draw value (scope.stuffToDraw) --> <!-- painter will be the host element for our directive instances --> <painter ng-repeat="value in values" stuff-to-draw="value"></painter>

这不是唯一可以实现的方法，您还可以在控制器中完成很多工作。

如果您想进一步了解指令的实际工作原理，可以在这里找到更多信息。

可以在这里找到最新版的unk子。

我如何将一个单独的Javascript代码实例附加到N个角度视图

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-12-23 22:38:33

我如何将一个单独的Javascript代码实例附加到N个角度视图

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-12-23 22:38:33

解决方案1
1 已采纳 2015-12-23 22:38:33