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']);

之前已为此项目安装并使用了一些插件，但这个插件给我带来了麻烦。任何建议都将不胜感激。

我在应用程序开始运行时遇到错误，然后才需要注入＆＃34;上传＆＃34;进入控制器。

谢谢，

马特

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();" />

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

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

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

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

1 个答案: