Question

我正在使用带有ThreeJS的AngularJS，尝试在我的网络应用程序中制作一些3D交互式图形.TourJS部分成功显示并按预期工作但AngularJS似乎无效。在我的index.html中，我有：

<html ng-app="plantApp">
    <body ng-controller="AppCtrl">
        <plant-canvas></plant-canvas>
        <div>{{data}}</div>
    </body>
</html>

这里的plant-canvas是一个自定义指令，其定义是：

angular.module("plantApp")
.directive("plantCanvas", function() {
    return {
        restrict: "E",
        templateUrl: 'partials/canvas.html',
        controller: 'canvasCtrl',
        scope: {
            data: '='
        }
    };
});

canvasCtrl是一个仅用于画布操作的控制器，而canvas.html是用于画布的部分html文件。我现在正在尝试显示一个名为test和graphics的变量。所以在部分html文件中，我有

<div>{{test}}</div>
<div id="container"></div>

ThreeJS使用容器进行绘图。在canvasCtrl中，我有：

angular.module("plantApp")
.controller("canvasCtrl",function($scope){
  $scope.test = "This is a test";

  //ThreeJS code for drawing here

});

图形的所有功能也在canvasCtrl中。当我运行网站时，我有

{{test}}

显示，然后是图形部分。我不知道如何解决这个问题，因为错误似乎是由three.js生成的，但也被AngularJS捕获。 Angular不直接操作图形，但脚本是在控制器中编写的。如果我将“”移动到index.html并将代码的图形部分移动到脚本标记内的index.html，那么AngularJS将正常工作 - “这是一个测试”将显示出来。我该怎么办？有没有更好的方法将ThreeJ与AngularJS混合使用？

我认为解决这个问题的方法是让angular忽略这个错误并继续它的工作，是否可以这样做？

Angular.js错误：矩阵不可逆

0 个答案: