我正在进行一个学校项目,我正在从数据库中读取 x 和 y 坐标,并使用这些数据和 Two.JS 在网页上的地图图像上绘制一系列桌椅。我已经使用 ng-repeat 来确认我正在接收我想要的数据,但是在我的绘图脚本中找不到任何使用它的方法。
我的 HTML 调用 div 中的绘制脚本(地图和 tablenchairs 绝对定位,因此 tablenchairs 绘制在地图图像的顶部):
<div id="map">
<img src="images/map.png" id="mapimg">
</div>
<div id="tablesnchairs"><script src="js/draw.js"></script></div>
<table id="test" ng-controller="TableController as tblCtrl" >
<tr ng-repeat="table in tblCtrl.tablelist">
<td>{{table.xco}}</td>
<td>{{table.yco}}</td>
</tr>
</table>
获取数据.js:
"use strict";
var app = angular.module('SeatingApp', ['ngResource', 'ngStorage']);
app.factory('chairDAO', function ($resource){
return $resource('/api/chair/:chairid');
});
app.factory('tableDAO', function ($resource){
return $resource('/api/tables/:tableid');
});
app.controller('TableController', function(tableDAO, chairDAO, $scope){
this.tablelist = tableDAO.query();
this.chairslist = chairDAO.query();
$scope.tablelist = this.tablelist;
$scope.chairslist = this.chairslist;
});
绘制.js:
/* global Two */
var elem = document.getElementById("tablesnchairs");
var myApp = angular.module('myApp', []);
var t = myApp.controller('myController', ['tablelist', function ($scope) {
this.tablelist = $scope.tablelist;
}]);
var two = new Two({
type: Two.Types.canvas,
fullscreen: false
}).appendTo(elem);
angular.forEach(t.tablelist, function(value){
var temp = two.makeRectangle(value.xco, value.yco, 5, 5);
});
two.update();
有没有一种简单的方法可以做到这一点?