AngularJs＃入力ファイルのディレクティブのchangeイベントのスコープ変数を渡す方法

Question

コントローラの機能にangleディレクティブでデータを渡すことができません。ディレクティブにはchangeイベントが1つあります。私は私の動的なIDを渡したいと思う。私はHTMLを以下しているmyarrayの

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

を持つコントローラで 。

<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(); 
      }); 
     } 
    } 
}); 

あなたは私がngUploadChangeディレクティブにuploadFile機能を渡すとき、それは常に（この場合は最初のIDを渡すことを見ることができるように1）コントローラ機能です。 私はいつも更新IDを取得していません。

ありがとうございます。

Answer 1

あなたは関数を使用してパラメータを渡したい場合は、あなたがそのために"="の代わり"&"を使用することができますが結合し、あなたのHTMLに、あなたはこのように指定することができますATTRそのオブジェクトを作成する必要がないので、あなたはparamsのオブジェクトを渡していました。あなたは以下のコードを見れば

は今、それは正しく、各ファイルのアップロードに（0ベース）id: xをログに記録します。

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>

Answer 2

スコープを分離せずにディレクティブを記述することをお勧めします。

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を戦うサイクルの遅延を消化引き起こすことが知られている追加のウォッチャーを追加します。私は方法を変え、

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

そして：