AngulaJS + FabricJS + ASP.MVC

创建项目asp.mvc并添加angularjs并添加fabricjs https://codepen.io/michaeljcalkins/pen/Imupw AngulaJS + FabricJS + ASP.MVC

现在我赶上错误控制台：错误：[$注射器：unpr]未知提供商：FabricProvider < - 面料< - ExampleCtrl

我app.js： “FabricProvider” 在我的项目

var app = angular.module('myApp', ['ngRoute', 'ngResource']); 
angular.module('example', [ 
    'common.fabric', 
    'common.fabric.utilities', 
    'common.fabric.constants' 
]).controller('ExampleCtrl', ['$scope', 'Fabric', 'FabricConstants', 'Keypress', function ($scope, Fabric, FabricConstants, Keypress) { 

    $scope.fabric = {}; 
    $scope.FabricConstants = FabricConstants; 

    // 
    // Creating Canvas Objects 
    // ================================================================ 
    $scope.addShape = function (path) { 
     $scope.fabric.addShape('http://fabricjs.com/assets/15.svg'); 
    }; 

    $scope.addImage = function (image) { 
     $scope.fabric.addImage('http://stargate-sg1-solutions.com/blog/wp-content/uploads/2007/08/daniel-season-nine.jpg'); 
    }; 

    $scope.addImageUpload = function (data) { 
     var obj = angular.fromJson(data); 
     $scope.addImage(obj.filename); 
    }; 

    // 
    // Editing Canvas Size 
    // ================================================================ 
    $scope.selectCanvas = function() { 
     $scope.canvasCopy = { 
      width: $scope.fabric.canvasOriginalWidth, 
      height: $scope.fabric.canvasOriginalHeight 
     }; 
    }; 

    $scope.setCanvasSize = function() { 
     $scope.fabric.setCanvasSize($scope.canvasCopy.width, $scope.canvasCopy.height); 
     $scope.fabric.setDirty(true); 
     delete $scope.canvasCopy; 
    }; 

    // 
    // Init 
    // ================================================================ 
    $scope.init = function() { 
     $scope.fabric = new Fabric({ 
      JSONExportProperties: FabricConstants.JSONExportProperties, 
      textDefaults: FabricConstants.textDefaults, 
      shapeDefaults: FabricConstants.shapeDefaults, 
      json: {} 
     }); 
    }; 

    $scope.$on('canvas:created', $scope.init); 

    Keypress.onSave(function() { 
     $scope.updatePage(); 
    }); 

}]);

查找没有结果。请帮忙。

我打开这个项目https://github.com/HelenSPR/TestAngularjsFabricjs

非常感谢。

来源

2017-10-09 HelenSpr

你有没有添加fabric.js在.net mvc视图之前角？ – Niladri

为什么你在你的页面中使用多个模块'var app = angular.module（'myApp'，['ngRoute'，'ngResource']）;'这是从未在你的代码中使用 – Niladri

嗨，我先安装角然后fabricjs。现在我删除这些项目，并添加第一个fabricjs，然后角。但是这个例外依然存在。 – HelenSpr

按在github上提供的代码，在你的_Layout.cshtml页面，你应该包括脚本包像下面为了

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/angular") 
@Scripts.Render("~/bundles/fabric") 
@Scripts.Render("~/bundles/angularapp")

，你应该删除从_layout文件复制模块和控制器，如下

<body ng-app="example" ng-controller= "ExampleCtrl">

因为您在index.cshtml中也使用了相同的模块和控制器。

在你的页面布局，你应该包括束@Scripts.Render("~/bundles/fabric")从fabric.js包含在捆绑~/bundles/fabric

来源

2017-10-10 08:58:54 Niladri

对不起，我还有错。 – HelenSpr

Niladri捆@Scripts.Render("~/bundles/angularapp")作为app.js依赖于面料的依赖之前！我重新启动VS并纠错取出！

非常感谢！

来源

2017-10-11 07:24:33 HelenSpr

AngulaJS + FabricJS + ASP.MVC

回答

相关问题