如何在laravel-angular项目中设置ng-file-upload？

Question

我使用的是laravel angular设置。http://www.laravel-angular.io/#/

我也尝试使用ng-file-upload，就像这里描述的那样。https://github.com/danialfarid/ng-file-upload

我在设置我的项目来访问这个ngFileUpload指令时遇到了问题，它在安装中说。( https://github.com/danialfarid/ng-file-upload#-install)

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>

但我的问题是，如果我使用elixir编译所有依赖项，我应该将这些引用放在哪里？

另外，如果我需要将这行代码加载到应用程序中，我应该把它放在哪里(我在考虑index.modules.js)

var app = angular.module('fileUpload', ['ngFileUpload']);

我已经安装和使用了这个项目之前的一些插件，但这个是给我的麻烦。任何建议都将不胜感激。

当应用程序开始运行时，在我需要向控制器注入“上传”之前，我一直收到错误消息。

谢谢,

哑光

Answer 1

我找到了一个变通方法，基本上需要将$scope注入控制器并定义fileChanged()函数，如下所示。

class TestController{
    constructor($scope,API){
        'ngInject';
        this.API = API
        this.$scope = $scope;
    }

    $onInit(){
        this.file = null;
        this.$scope.fileChanged = function(elm) {
            console.log('hey')
            this.file = elm.file;
            this.$apply();
        }
    }
    upload() {
        console.log(this.file)
    }

}

现在可以像这样在HTML模板中调用：

<input type="file"
               accept="image/*"
               ng-model="vm.file"
               onchange="angular.element(this).scope().fileChanged(this); angular.element(this).scope().$digest();" />

我不完全理解它是如何工作的，但它现在似乎正在调用我的函数，所以应该能够让它工作。以下两个链接非常有用。

https://egghead.io/lessons/angularjs-file-uploads

https://github.com/angular/angular.js/issues/1375