相关疑难解决方法(0)

我正在接受一项任务,在HTML5中重写以下Flash应用程序:

http://www.docircuits.com/circuit-editor

鉴于应用程序的复杂性和我迄今为止的研发,我已经将AngularJS确定为实现的首选MVC框架.该应用程序有各种部分,如面板,菜单,属性,图表等,我相信所有这些都可以在AngularJS中轻松实现.

然而,关键问题是组件设计和交互(诸如拖放,移动,线处理等)需要基于Canvas,因为我已经能够使用Flash导出所有矢量图形CreateJS工具包(http://www.adobe.com/in/products/flash/flash-to-html5.html)到Canvas库而不是SVG.

问题是在"画布内的单个对象"和AngularJS之间没有明确的通信方式.我查看了以下示例,但几乎所有示例都在canvas对象上工作,而不是处理Canvas中的各个组件:

AngularJS绑定到WebGL/Canvas

是否已经为AngularJS制作了画布绘图指令？

我有点被困在这里,不知道该怎么做.真的很感激一些评论:

• AngularJS是否是正确的选择？

• 我应该尝试在另一个库中实现Canvas部分(例如Fabric.js,kinect.js,Easel.js)并将其与Angular集成(现在这似乎也是一项太大的任务)？

• 如果不是上述内容,我应该切换到哪个其他框架可以轻松处理画布以及面板,菜单,图表等其他功能？

我真的是 AngularJS 的新手，所以这可能真的很明显！

我有一个服务，它会做一些基本的检查，然后返回信息。我在控制器和函数中调用此服务。

当我在控制器中调用它时，它工作正常，没有错误。

当我在函数中调用它时，我得到

angular.js:9101 ReferenceError: systemService 未定义

在有效的控制器中调用服务：

myApp.controller('continueController', ["$scope", "$rootScope", 'systemService', function ($scope, $rootScope, systemService) {
            $scope.ContinueAngularMethod = function () {

                $rootScope.field = 'payment';
                $scope.field = $rootScope.field;
                $scope.notApp = '1';
                console.log("I don't error in here");
                $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
                $rootScope.$apply();
            }
        }]);

在不起作用的函数中调用服务：

function MyCtrl($scope) {

                $scope.changeme = function () {
                    console.log("Drop down changes ideally do something here....");

                    //Call to service  
                    $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);

                    console.log($scope.ss.field);
                    console.log($scope.ss.notAppJ);

                }

这是我的完整代码：

<script type='text/javascript'>

        //Angular stuff
        var myApp = …