在角度指令中找不到元素？

Question

我對文件類型使用Angular指令輸入文件，但輸入變量未定義。

angular.directive("ngUpload", function() { 
    return { 
     restrict : "A", 
     template : '<input id="fileInput" name="file" type="file" class="ng-hide" multiple><md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>', 
     link : function (scope, element, attrs) { 
      var input = element.find('#fileInput'); 
      var button = element.find('#uploadButton'); 

      if (input.length && button.length) { 
       button.click((e) => input.click()); 
      } 
     }, 
    }; 
}); 

Answer 1

如documentation中所述，jqLit​​e的查找僅限於通過標籤名查找。

所以，你可以包含jQuery（在angular.js之前）通過id檢索元素，或者使用另一種方法來抓住輸入。

因爲只有在你的模板一個輸入元素你甚至都不需要一個id選擇，所以這應該工作：

var input = element.find('input'); 

此外，directive被宣佈爲模塊上，而不是全球的角度對象。

最後，不要在ng-前面加上自己的指令，因爲它們可能會與（未來的）有角度的核心指令衝突。

一個更完整的例子：

angular.module('myModule').directive("customUpload", function() { 
    return { 
     restrict : "A", 
     template : '<input id="fileInput" name="file" type="file" class="ng-hide" multiple><md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>', 
     link : function (scope, element, attrs) { 
      var input = element.find('input'); 
      var button = element.find('md-button'); 

      if (input.length && button.length) { 
       button.click((e) => input.click()); 
      } 
     }, 
    }; 
});