AngularJS指令 - 在輸入文件更改時調用特定函數

我正在創建一個將包含許多不同問題的清道夫搜索編輯器。此外，每個問題可以是不同的類型。因此，我有一系列的問題，我會重複一遍以顯示所有問題。AngularJS指令 - 在輸入文件更改時調用特定函數

爲此，我有一個表示問題的javascript對象。這個問題可以通過不同的問題類型繼承。

我有一個特定的問題類型，即slidingPuzzle，這將需要上傳圖片。我的問題到達這裏，我想在輸入文件改變時能夠在這個對象內部調用一個函數。

我想在這裏強調一個事實，即它不能是範圍內聲明的一般函數！

這裏是我的結構看起來像（http://plnkr.co/edit/lnJ8rAlpP0xJ3aM2HZ7o?p=preview）：

HTML：

 <div class="question" ng-repeat="question in scavengerHunt.questions"> 

     <div class="chooseQuestionType"> 
      Question type: 
      <select ng-change="question.setChild()" ng-model="question.subClass"> 
      <option value="slidingPuzzleQuestion">slidingPuzzleQuestion</option> 
      </select> 
     </div> 
     <div class="questionContainer"> 
      <div class="puzzleContainer"> 

        <input type="file" name="image" id="puzzleContainerImage" ng-file-select="question.child.imageFileSelected()"> 

      </div> 
     </div>

AngularJS型號：

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

});

AngularJS指令

到目前爲止，我認爲我可能不得不使用AngularJS指令，因爲ng-change當前不適用於輸入文件（https://github.com/angular/angular.js/issues/1375）。因此，下面的代碼不起作用，因爲在html標記ng-file-select="question.child.imageFileSelected()"中，當嘗試將元素綁定到函數時，我有一個上下文丟失。

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

       } 

      } 


     });

那麼，有沒有辦法在HTML代碼中傳遞當前上下文以將其綁定到特定對象？

我希望一切都足夠清楚，如果不讓我知道，我會盡可能澄清！

來源

2014-02-25 CoachNono

角轉換能否請您詳細說明爲什麼它不能是一般的功能在範圍內聲明？ –

因爲它是我的架構設計的一部分。我展示了一小部分代碼，但主要是它不能成爲一般功能。 – CoachNono

好吧，看看這個plunker：http://plnkr.co/edit/qPK6EmAkt39QoZFZ5Sa3?p=preview

我已刪除了部分代碼只是爲了讓你明白這是怎麼回事低的水平。

您可以使用隔離範圍與回調使用&符號屬性結合。它所做的是在指令的隔離範圍內註冊表達式在屬性中作爲可調用函數。

規則是：

您註冊孤立範圍
```
scope : { 
    myAttr : "&" 
} 
```

您的形式指定屬性

my-attr="object.objectMethod(param1, param2)"

角包裹objectMethod與可調用包裝

當需要時，可以調用像這樣的包裝：

scope.myAttr({param1: "value", param2:"value"})

此調用到實際object.objectMethod調用與參數指定

來源

2014-02-26 15:55:16

太棒了！謝謝！ – CoachNono

AngularJS指令 - 在輸入文件更改時調用特定函數

回答

相關問題