Angular：尋找自定義指令語法的解釋

我複製了一個自定義指令watches for changes on form file inputs。Angular：尋找自定義指令語法的解釋

angular.module('customDirective', []) 
.directive('ngFileInputChange', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var onChangeHandler = scope.$eval(attrs.ngFileInputChange); 
      element.bind('change', onChangeHandler); 
     } 
    }; 
});

然後，我用它在模板中像這樣：

<input ng-model="vm.image" ng-file-input-change="vm.base64Test" ...>

這工作得很好。

然而，這不起作用：

<input ng-model="vm.image" ng-file-input-change="vm.base64Test()" ...>

注意()在base64Test()結束。使用通用的ng-click，括號很好，甚至是必需的（我將如何將參數傳遞給函數？），但是使用自定義指令時，括號會導致錯誤。

我只對scope.$eval(attrs.ngFileInputChange)實際上在做什麼有一個模糊的理解，所以也許我可以做一些改變？

編輯：

我還應該補充一點，我需要訪問一些範圍變量。例如，如果我沒有使用自定義指令，我會寫這樣的事情在我的控制器：

vm.base64Test(associatedData){ 
    console.log(associatedData);  
}

然後：

<input ng-change("vm.base64Test(vm.associatedData)">

但是NG-變化不看文件輸入內容和自定義指令不允許參數（事件除外），所以我卡住了。

來源

2016-06-14 crowhill

首先，如果你從一個指令的API調用一個方法規劃（可以這麼說），你需要確定它作爲一個回調：

scope: { 
    'onChange': '&ngFileInputChange' 
}

這只是意味着你定義/曝光的方式，當scope.onChange被觸發申報的回調。這也意味着您不需要$parse或$eval，因爲隔離範圍可以爲您處理。

接下來，您可以觸發回調就像你已經做：

element.bind('change', function(evt){ 
    $scope.$apply(function(){ 
     var payload = { $data:<whatever-you-pull-from-your-file-change-evt> } 
     $scope.onChange(payload) 
    }) 
});

有一點要注意的是，我打電話$scope.$apply內回調。由於您正在偵聽非角度事件（例如onChange），因此您需要通知角度在$digest週期之外發生的更改。

如果你聲明的指令，在實際的回調（您的視圖控制器上可能定義的），你可以將有效載荷傳遞給方法，像這樣：

<input ng-file-input-change="vm.doSomething($data)">

來源

2016-06-14 19:12:05 jusopi

將函數傳遞給指令時，您通常需要傳遞函數指針，以便指令稍後可以使用任意參數調用該函數。

在這種情況下，您的指令正在評估函數指針的屬性（這就是$ eval正在做的），然後將其作爲指令附加到的元素綁定爲change處理程序。你不需要（或不想）有括號。

您的代碼沒有問題，因爲它是目前。我有一個完全相同的指令，它效果很好！（當你的函數vm.base64Test是叫你將得到standard arguments for a change event上的輸入。）所以你可以有vm.base64Test是：

function(event) { 
    console.log(event); 
    // your other code here 
    // event.target will give you the input element the code was called on 
    // event.target.files will give you an array of the files selected by the user 
}

來源

2016-06-14 17:02:59 Mator

感謝您的回答。我基本上做了你在這裏的事情，但我仍然遇到問題。我擴展了我的問題來解釋。 – crowhill

你在哪裏定義vm.base64test？這聽起來像是一個架構問題，你應該在一個控制器的上下文中定義fileChange事件處理函數，該控制器可以訪問使用指令的$ scope，這樣你就可以用這種方式訪問函數。如果不明確，我可以做出一個決定。 – Mator

Angular：尋找自定義指令語法的解釋

回答

相關問題