我的html页面中有一个画布。默认情况下,当画布在html页面上加载时,我试图从我的angularjs控制器调用一个函数。我可以通过使用window.onload函数来实现。但是我无法通过这种方式传递任何参数。我尝试了ng-init。但是我遇到了错误。如果我尝试ng-mouseover则可以工作,如果我将鼠标放在画布上。但是我想在没有用户交互的情况下调用该函数,只需重新加载页面即可。我是angularjs的新手。有什么办法可以做到吗?谢谢。
HTML部分
<body >
<div ng-app="demo" ng-controller="testCtrl" >
<div class="flex-control-nav" >
<div>
<canvas ng-style="mybody" id="myCanvas" ng-init=init('myCanvas') style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
</div>
</div>
angularjs部分
var app = angular.module("demo", []);
app.controller("testCtrl", function($scope,$http,$window) {
$scope.temp = "";
$scope.rows = []; // init empty array
$scope.datainput =[];
$scope.dataconfig =[];
$http({
method: 'GET',
url: 'http://localhost:5000/database'
}).then(function (data){
},function (error){
console.log("big error");
});
$http({
method: 'GET',
url: 'Data/input.json'
}).then(function (data){
$scope.datainput=data.data;
console.log($scope.datainput);
},function (error){
console.log("big err");
});
$http({
method: 'GET',
url: 'Data/config.json'
}).then(function (config){
$scope.dataconfig=config.data;
//console.log($scope.datainput);
},function (error){
console.log("config error");
});
$scope.refresh = function(){
location.reload();
}
$scope.init = function(canvasid) {
var json=JSON.parse(JSON.stringify($scope.datainput));
var jsonconfig=JSON.parse(JSON.stringify($scope.dataconfig));
var n = $scope.givenNumber;
var cheight=jsonconfig[3].value;
var cwidth=jsonconfig[4].value;
$scope.rows = [];
var newx;
var newy;
for(var k=0;k<=1;k++){
var c =document.getElementById(canvasid);
c.width=cwidth;
c.height=cheight;
这是我使用ng-init时的错误
“ angular.min.js:127 TypeError:无法读取b。$ scope.init处未定义的属性'value'
答案 0 :(得分:0)
也许我可以解决。看来解决了我的问题。这是代码。 角部
$scope.myrunner =function(canvasid){
var flag=0;
$http({
method: 'GET',
url: 'http://localhost:5000/database'
}).then(function (data){
},function (error){
console.log("big error");
});
$http({
method: 'GET',
url: 'Data/input.json'
}).then(function (data){
$scope.datainput=data.data;
console.log($scope.datainput);
},function (error){
console.log("big err");
});
$http({
method: 'GET',
url: 'Data/config.json'
}).then(function (config){
$scope.dataconfig=config.data;
$scope.init(canvasid);//this is the previous function
console.log($scope.datainput);
},function (error){
console.log("config error");
});
}
$scope.refresh = function(){
location.reload();
}
$scope.init = function(canvasid) {
var json=JSON.parse(JSON.stringify($scope.datainput));
var jsonconfig=JSON.parse(JSON.stringify($scope.dataconfig));
HTML部分
<div>
<canvas ng-style="mybody" id="myCanvas" ng-init=myrunner('myCanvas') style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<div>
<canvas ng-style="mybody" id="myCanvas2" ng-init=myrunner('myCanvas2') style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>