无法使用 ng-init 调用 angularjs 函数

Posted

技术标签:

【中文标题】无法使用 ng-init 调用 angularjs 函数【英文标题】:Can't call angularjs function using ng-init 【发布时间】:2019-11-12 20:41:49 【问题描述】:

我的 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: Cannot read property 'value' of undefined at b.$scope.init

【问题讨论】:

你可以直接在你的控制器函数内部调用$scope.init('myCanvas')。这样它会在页面刷新时自动调用。您应该从元素中删除 ng-init 然后 但是有一个问题。我想从html页面传递这个参数'myCanvas'。 我已经尝试过您的解决方案,但得到了同样的错误。TypeError: Cannot read property 'value' of undefined at b.$scope.init 你可以在控制台中检查jsonconfig是否包含任何数据或它为空,你可以通过jsonconfig.length检查它的长度 当页面刚刚刷新时,jsonconfig 应该是什么?您将 $scope.dataconfig 设置为 [] 并且仅异步加载数据。为了确保 $scope.init 仅在异步加载完成后运行,您必须将对 $scope.init() 的调用放入相应 http 调用的 .then() 回调中。 【参考方案1】:

也许我有一个解决方案。它似乎解决了我的问题。这是代码。 棱角部分

$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>

【讨论】:

以上是关于无法使用 ng-init 调用 angularjs 函数的主要内容,如果未能解决你的问题,请参考以下文章

如何在 AngularJS 的 ng-init 中使用三元? [复制]

ng-init 指令初始化 AngularJS 应用程序变量并支持html5

AngularJS入门笔记01

angularjs中常见错误

如何使用angularJS指向生产中的html模板

angular 指令 {{}} 表达式 ng-init