title: AngularJS Directive - Call a specific function when an input file changes
body: <p>I am creating a scavenger hunt editor that will contain many different questions. Also, each question can be of different type. Therefore, I have one array of questions and I do an ng-repeat to show all the questions.</p>
  
  <p>To do so, I have a javascript object that represent a Question. This question can be inherited by different question types.</p>
  
  <p>I have one specific question type, that is <code>slidingPuzzle</code>, which will require an image to be uploaded. My problem arrives here, I want to be able to call a function, inside this object, when the input file changes. </p>
  
  <p><strong>I want here to put the emphasis on the fact that it cannot be a general function declared in the scope !</strong></p>
  
  <p>Here's how my structure looks like (<a href="http://plnkr.co/edit/lnJ8rAlpP0xJ3aM2HZ7o?p=preview" rel="nofollow">http://plnkr.co/edit/lnJ8rAlpP0xJ3aM2HZ7o?p=preview</a>):</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>      &lt;div class="question" ng-repeat="question in scavengerHunt.questions"&gt;
  
          &lt;div class="chooseQuestionType"&gt;
            Question type:
            &lt;select ng-change="question.setChild()" ng-model="question.subClass"&gt;
              &lt;option value="slidingPuzzleQuestion"&gt;slidingPuzzleQuestion&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="questionContainer"&gt;
              &lt;div class="puzzleContainer"&gt;
  
                    &lt;input type="file" name="image" id="puzzleContainerImage" ng-file-select="question.child.imageFileSelected()"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>AngularJS Model:</strong></p>
  
  <pre><code>var scavengerHuntApp = angular.module('scavengerHuntApp', []);
  
  scavengerHuntApp.controller('QuestionsCtrl', function ($scope) {
    function ScavengerHunt() {
                  var self = this;
  
                  self.questions = [];
  
  
                  self.addQuestion = function(question) {
                      self.questions.push(question);
                  }
  
              }
    function Question() {
                  var self = this;
  
                  self.id = 0;
                  self.subClass = "slidingPuzzleQuestion";
  
  
                  self.child = "";
  
                  self.setChild = function() {
                      var type = self.subClass;
  
                      if(type == 'slidingPuzzleQuestion'){
                          self.child = new SlidingPuzzleQuestion();
                      }
  
                  }
              }
  
              function SlidingPuzzleQuestion() {
                  var self = this;
  
  
                  self.imageFileSelected = function () {
                      console.log()
                  };
  
  
  
              }
  
  
              //Utilities function
              $scope.addEmptyQuestion = function() {
                  $scope.scavengerHunt.addQuestion(new Question());
              }
  
              $scope.scavengerHunt = new ScavengerHunt();
  
              $scope.addEmptyQuestion();
  
  });
  </code></pre>
  
  <p><strong>AngularJS Directive</strong></p>
  
  <p>Up to now, I figured that I would probably have to use an AngularJS directive, since the ng-change does not work currently with input file (<a href="https://github.com/angular/angular.js/issues/1375" rel="nofollow">https://github.com/angular/angular.js/issues/1375</a>). Hence, the following code does not work since in the html tag <code>ng-file-select="question.child.imageFileSelected()"</code> , I have a context that is lost when trying to bind the element to a function.</p>
  
  <pre><code>  scavengerHuntApp.directive("ngFileSelect",function(){
  
              return {
                  link: function (scope, element, attrs) {
  
                      console.log(scope);
                      console.log(element);
                      var onChangeFunc = element.scope()[attrs.customOnChange];
                      element.bind('change', onChangeFunc); 
  
                  }
  
              }
  
  
          });
  </code></pre>
  
  <p>So, is there a way to pass the current context in the html code to bind it to a particular object ?</p>
  
  <p>I hope everything is clear enough, if not let me know and I'll clarify as much as possible !</p>