Question

我有一个表格，我遍历行并显示信息以供编辑。我有图像上传的文件输入。文件输入是一个引导程序扩展，它提供了一个很好的接口。这是链接：http://plugins.krajee.com/file-input/demo

它有一个简单的用法，您可以使用输入标记中的attributs定义输入组件，例如data-show-upload，或者您可以使用jquery初始化组件，例如：

$("#photo").fileinput({showCaption: false});

这是我的表：

<table id="table-brand" class="table" style="border-style:none">
<tr>
    <td><b>Marka Adı</b></td>
    <td><b>Bilgi</b></td>
    <td><b>Aktif</b></td>
    <td><b>Logo</b></td>
</tr>
<tr name="brand" ng-repeat="brand in selectedCustomer.brands">
    <td><input name="name" type="text" class="form-control"
           id="field-brand-name"
           style="width:150px" value="" title="Vergi No"/></td>
    <td><textarea name="bio" type="text" class="form-control"
          id="field-brand-bio"
          style="width:150px" value="" title="Vergi No"></textarea></td>
    <td><input index="0" id="photo0" name="photo" type="file" class="file"
           accept=".jpg,.jpeg,.png" style="width:120px;"
           data-show-upload="false" data-show-caption="false"
           data-show-preview="false"/></td>
</tr>
</table>

问题是当我将它与ng-repeat一起使用时，文件输入不起作用（绑定到它的javascript代码不起作用）。当我删除ng-repeat然后它工作。我想这是因为我们需要使用上面的javascript初始化这些输入，因为angular会创建这些元素。所以尝试了以下几行：

$(document).ready(function() {
    $('[name="photo"]').fileinput({showCaption: false, showPreview: false, showUpload: false});
});

但它没有用。同样没有删除ng-repeat，如果我把输入元素放在＆＃39;＆lt; td＆gt;＆＃39;它有效。

感谢。

修改：我调试了行

$(document).ready(function() { .. }

当代码执行停止时，angular尚未呈现页面，因此查询不返回任何内容并且不执行初始化程序。

我需要一些函数来告诉角度在渲染页面或ng-repeat之后执行。

Answer 1

使用此

 $(document).ready(function() {
       k();
    });


var k= function { $('#photo0').fileinput({showCaption: false, showPreview: false, showUpload: false});}

Answer 2

使用自定义指令运行jQuery代码。将指令放在输入字段上，并在指令的链接函数中运行manupilation。

angular.module('moduleName')
    .directive('myDirective', function () {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        scope: {
            //@ reads the attribute value, = provides two-way binding, & works with functions
            title: '@'         },
        template: '<div>{{ myVal }}</div>',
        templateUrl: 'mytemplate.html',
        controller: controllerFunction, //Embed a custom controller in the directive
        link: function ($scope, element, attrs) { } //DOM manipulation
    }
});

你只需要上面的lunk函数，它给你指令元素

Answer 3

尝试在控制器上创建一个函数，在输入的init上调用fileinput并传递输入id，如下所示

<input ng-init="myCtrl.init_input_file('your_file_input')" id="your_file_input" type="file">

然后使用yous Js上的fileinput创建函数

$my.init_input_file = function(id){
   $timeout(function(){
      $("#"+id).fileinput();
      $('#'+id).change(function(){
           $my.models.files[id] = this.files;
      });
   });
 };

尝试在使用之前创建一个在更改时分配文件输入的位置。

我使用ng-repeat解决了没有时间的超时问题，等待HTML渲染。

ng-repeat中的角度文件输入（bootstrap）不起作用

3 个答案: