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

回答

相關問題