AngularJs #如何在输入文件中的指令中的更改事件中传递范围变量

布里杰什·索尼

我无法通过 angular 指令将数据传递给控制器​​的函数,指令有一个更改事件。我想在其中传递我的动态 ID。在控制器中我有 myArray

$scope.myArray = [1,2,3,4,5];

我有以下html。

<div ng-repeat="data in myArray track by $index">
    <input type="file" ng-upload-change="uploadFile($event, $id)" my-id="$index">
<div>

在控制器中:

$scope.uploadFile = function($event, $id){
    var files = $event.target.files;
    console.log("id:"+$id);
};

在指令中:

app.directive('ngUploadChange', function() {
    return{
        scope:{
            ngUploadChange:"&",
            myId:"="
        },
        link:function($scope, $element, $attrs){
            $element.on("change",function(event){
                $scope.ngUploadChange({$event: event, $id : $scope.myId});
            })
            $scope.$on("$destroy",function(){
                $element.off();
            });
        }
    }
});

如您所见,当我将 uploadFile 函数传递给 ngUploadChange 指令时,它总是将第一个 id(在本例中为 1)传递给控制器​​函数。我不是每次都得到更新的 ID。

提前致谢。

坦迈

当您想通过函数传递参数时,您可以使用"="代替"&"attr 绑定,并且在您的 HTML 中,您可以像这样指定:

<input type="file" ng-upload-change="uploadFile" ... />

而且,我改变了您传递 params 对象的方式,因为不需要创建该对象。

现在,如果您看到下面的代码片段,它会id: x在每个文件上传时正确记录(从 0 开始)。

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
myApp.controller('MyCtrl', function MyCtrl($scope) {
  $scope.myArray = [1, 2, 3, 4, 5];
  $scope.uploadFile = function($event, $id) {
    var files = $event.target.files;
    console.log("id: " + $id);
  };
});

myApp.directive('ngUploadChange', function() {
  return {
    scope: {
      ngUploadChange: "=",
      myId: "="
    },
    link: function($scope, $element, $attrs) {
      $element.on("change", function(event) {
        $scope.ngUploadChange(event, $scope.myId);
      })
      $scope.$on("$destroy", function() {
        $element.off();
      });
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="data in myArray">
    <input type="file" ng-upload-change="uploadFile" my-id="$index">
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在指令模板中传递范围-AngularJs

如何在AngularJS中实现自定义格式和输入指令(解决超越范围的问题)?

如何在angularJS指令中捕捉模糊或聚焦事件

如何在AngularJS指令中的元素上绑定滚动事件

如何使用AngularJS在ng-init中传递范围变量

如何在keydown事件中更改AngularJS中的模型

范围变量数据在AngularJS中未更改

AngularJS指令如何检测属性中的更改

在AngularJS中触发输入文件单击事件

如何在javascript中访问angularjs范围变量

如何在angularjs模板中设置范围变量值

如何在范围AngularJS中获取变量的值

如何在范围变量Angularjs中存储特定列

如何在AngularJS中“销毁”指令?

如何在AngularJS中动态添加指令?

如何在angularjs中获取指令的值

如何在 AngularJS 指令中更新类

如何在Angularjs指令中呈现html?

如何在AngularJS中动态嵌套指令

如何在angularjs中的html之间传递变量?

如何在 PHP 中通过 http 访问从 AngularJS 传递的变量?

AngularJs:如何检查文件输入字段中的更改?

如何将函数处理程序从控制器传递到AngularJs的指令隔离范围中?

AngularJS:如何在使用ng-repeat时将一个指令中的变量更改反映到另一个指令中

如何在Promise Angularjs中更改全局变量的值

angularjs 中的动态范围变量

如何在angularjs中克隆范围?

将隐藏的输入文件包含在AngularJS指令的链接中

AngularJS中ngModel指令的范围是什么?