Question

我无法通过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。

提前致谢。

Answer 1

最好在没有隔离范围的情况下编写指令。

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

使用$scope.$eval代替隔离范围绑定。

隔离范围增加了范围和其他观察者，这些观察者已知导致与ngModelController对抗的消化周期延迟。

Answer 2

如果要通过函数传递参数，可以使用"="代替"&"进行该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>

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

2 个答案: