纳克流量

纳克流是一个 流动.js 对angular.js框架的扩展,不需要第三党JS依赖性!

发音: http://flowjs.github.io/ng-flow/ (英语)

我怎么装?

1. 获取图书馆:

直接下载 从 https://github.com/flowjs/ng-flow/release (英语) 它包含开发与精密化生产文件 dist/ 目录, 它们也与核心流相配合.js库.

使用鲍尔

    bower install ng-flow#~2

Git 克隆语

    git clone https://github.com/flowjs/ng-flow

使用耀曼语

    bower install "ng-flow#~2" --save
    grunt bower-install

2. 将模块添加到您的应用程序中作为依赖 :

    angular.module('app', ['flow'])
   

3. 在您的工程中包含文件

<!-- concatenated flow.js + ng-flow libraries -->
<script src="ng-flow/dist/ng-flow-standalone.min.js"></script>
<!-- or include the files separately -->
<script src="flow.js/dist/flow.min.js"></script>
<script src="ng-flow/dist/ng-flow.min.js"></script>

我该怎么用呢?

首先,你要用 Flow.js 来包装地方

<div flow-init>
    ... other flow directives goes here ...
</div>

此指令将在当前范围中添加 $flow 变量 . 指令也可以嵌入,因为 $flow 变量将被覆盖. $flow 实例 流动。 。 。 .

其次, 您需要指定一些上传按钮 :

<input type="file" flow-btn />
<input type="file" flow-btn flow-directory />
  Input OR Other element as upload button
<span flow-btn>Upload File</span>

第一个按钮用于正常上传,第二个按钮用于目录上传. 注:避免使用 <a> 财务报告和审定财务报表 <button> 标签作为文件上传按钮,使用 <span> 换句话说.

现在您需要显示上传的文件,只需要循环文件阵列. 文件数组附在命名的流程对象上 $flow。 。 。 .

<tr ng-repeat="file in $flow.files">
    <td>{{$index+1}}</td>
    <td>{{file.name}}</td>
</tr>

文件为实例 流程文件。 。 。 .

快速设置

<div flow-init="{target: '/upload'}"
     flow-files-submitted="$flow.upload()"
     flow-file-success="$file.msg = $message">

  <input type="file" flow-btn/>
  Input OR Other element as upload button
  <span class="btn" flow-btn>Upload File</span>

  <table>
    <tr ng-repeat="file in $flow.files">
        <td>{{$index+1}}</td>
        <td>{{file.name}}</td>
        <td>{{file.msg}}</td>
    </tr>
  </table>
</div>
```

Need more examples?
============
Clone this repository and go to "ng-flow/samples/basic/index.html".
Single image upload "ng-flow/samples/image/index.html".


How can I drop files?
============

Use `flow-drop` directive:
````html
<div class="alert" flow-drop>
    Drag And Drop your file here
</div>

说明:在大多数情况下 flow-drop 必须与 flow-prevent-drop 指令 body 元素,因为它防止文件被载入浏览器.

防止在文档上丢弃文件

使用 flow-prevent-drop 指令 body 元素 :

<body flow-prevent-drop>

</body>

丢弃文件时如何添加一些样式 ?

使用 flow-drag-enter 指令 :

<div flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}"
     ng-style="style">
</div>

说明: flow-drag-leave 属性不能单独使用,它是 flow-drag-enter 指令.

如何动态禁用投放区域 ?

<div class="alert" flow-drop flow-drop-enabled="config.enabled">
    Drag And Drop your file here
</div>

见实例 samples/dataurl/。 。 。 .

如何预览上传的图像 ?

使用流程-img指令 :

<img flow-img="$flow.files[0]" />

一旦添加文件, 图像将自动更新 。 无需开始上传 .

我怎么才能为流动设定选项?.js?

使用配置 :

var app = angular.module('app', ['flow'])
.config(['flowFactoryProvider', function (flowFactoryProvider) {
    flowFactoryProvider.defaults = {
        target: '/upload',
        permanentErrors:[404, 500, 501]
    };
    // You can also set default events:
    flowFactoryProvider.on('catchAll', function (event) {
      ...
    });
    // Can be used with different implementations of Flow.js
    // flowFactoryProvider.factory = fustyFlowFactory;
}]);

也可以在"flow-init"指令上配置:

<div flow-init="{target:'/uploader'}">

</div>

我怎样才能赶上事件?

事件列于内部 flow-init 指令 :

<div flow-init
        flow-file-success="someHandlerMethod( $file, $message, $flow )"
        flow-file-progress="someHandlerMethod( $file, $flow )"
        flow-file-added="someHandlerMethod( $file, $event, $flow )"
        flow-files-added="someHandlerMethod( $files, $event, $flow )"
        flow-files-submitted="someHandlerMethod( $files, $event, $flow )"
        flow-file-retry="someHandlerMethod( $file, $flow )"
        flow-file-error="someHandlerMethod( $file, $message, $flow )"
        flow-error="someHandlerMethod( $file, $message, $flow )"
        flow-complete=" ... "
        flow-upload-started=" ... "
        flow-progress=" ... "
      >
      <div flow-file-progress=" ... events can be also assigned inside flow-init ... "></div>

</div>

我怎么能在控制器里抓住一个事件?

如果控制器与 flow-init 指令或儿童范围, 然后我们就可以赶上事件 $on。事件前缀为 flow::。 。 。 .

$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
  event.preventDefault();//prevent file from uploading
});

第二个论点总是 flow 实例,然后遵循事件特定参数.

如何分配流到母范围?

使用 flow-name 属性并设定为范围中的任何变量.

<div flow-init flow-name="obj.flow">
    ... Flow is set to obj.flow  ...
    I have uploaded files: #{{obj.flow.files.length}}
</div>

$scope.obj = {}; // variable "obj" must be initialized on the scope

如何以已有的流对象初始化流?

使用 flow-object 属性,并设置在范围上的现有流动对象.

<div flow-init flow-object="existingFlowObject">
    ... Flow is initialized with existingFlowObject, no new Flow object  is created ...
    There are already {{ existingFLowObject.files.length }} files uploaded,
    which is equal to {{ $flow.files.length }}.
</div>

我怎么支持更老的浏览器?

转到 https://github.com/flowjs/fusty-flow.js (中文(简体) ) 并在配置中添加:

var app = angular.module('app', ['flow'])
.config(['flowFactoryProvider', function (flowFactoryProvider) {
    flowFactoryProvider.factory = fustyFlowFactory;
}]);

捐款

为确保源代码的一致性,请在工作时铭记这些规则:

• 所有特性或bug修正必须经过一个或多个规格的测试.

• 除下文所列的例外情况外,我们遵循载于第12条的规则 Google 的 JavaScript 样式指南数字 :

  • 以100个字符包起所有代码 .

  • 而不是复杂的继承等级, 我们更喜欢简单的对象。 我们使用原型 只有在绝对必要时才能继承遗产.