AngularJS 与 Angular-ui-router 和 jQuery-File-Upload答案

【问题标题】：AngularJS with Angular-ui-router and jQuery-File-UploadAngularJS 与 Angular-ui-router 和 jQuery-File-Upload
【发布时间】：2014-02-14 16:20:47
【问题描述】：

我正在使用angular-ui-router 来控制我在 AngularJS 应用程序中的状态。在一部分中，我使用jquery-file-upload。我遇到的问题是，当我使用example given by jquery-file-upload 时，它在模板中定义了这样的控制器：

<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" 
  enctype="multipart/form-data" data-ng-app="demo" 
  data-ng-controller="DemoFileUploadController" data-file-upload="options" 
  data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
... 
</form>

表单标签有data-ng-controller="DemoFileUploadController"。在我的控制器中，这会创建所需的所有文件上传方法（如 $scope.submit() 和 $scope.queue）

问题是我定义了我的控制器 angular-ui-router 样式，就像在我的 app.js 中一样：

$stateProvider.state('upload', {
  url: "/upload",
  views: {
    "upload": { 
      templateUrl: "app/partials/upload.html", 
      controller: 'DemoFileUploadController' 
    },
  }
})

但是这段代码会导致我的文件上传方法无法加载（或绑定）在我的控制器中（没有$scope.submit() 和$scope.queue）。

有没有办法可以同时使用 angular-ui-router 和 jquery-file-upload？

【问题讨论】：

指令 file-upload 正在使用 scope : true，它正在创建一个新的隔离范围。这就是为什么您的父范围没有绑定
我已经阅读了 docs.angularjs.org/guide/… 的相关信息，但我无法提出一个干净的解决方案，我仍然可以拥有指令的隔离范围（这是首选）并使用另一个控制器的范围。

标签： angularjs file-upload angular-ui jquery-file-upload angular-ui-router

【解决方案1】：

我的解决方法是在定义状态时简单地省略控制器：

$stateProvider.state('upload', {
  url: "/upload",
  views: {
    "upload": { 
      templateUrl: "app/partials/upload.html"
    },
  }
})

这样我在我的模板中分配控制器（如示例data-ng-controller="DemoFileUploadController"）。我仍在寻找一种通过 stateProvider 分配控制器的方法。

【讨论】：