瞭解角度指令

Question

我發現這個指令用於讀取文件。它工作的很好，但我想了解它是如何工作的。一旦我有一個很好的理解，我想設置一個元素背景圖像到這個指令裏面的BASE64圖像。任何幫助都會很棒。

.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       var reader = new FileReader(); 
       reader.onload = function (loadEvent) { 
        scope.$apply(function() { 
         scope.fileread = loadEvent.target.result; 
        }); 
       } 
       reader.readAsDataURL(changeEvent.target.files[0]); 
      }); 
     } 
    } 
}]); 

Answer 1

該指令使用最新瀏覽器中的新FileReader API。這個API讓瀏覽器使用JavaScript提供的輸入類型=文件控制來選擇文件，以便進行處理。簡而言之，您初始化閱讀器，給它一個函數，在文件加載完成後運行，然後告訴它加載文件。你可以直接用JavaScript或者像這樣的指令將它綁定到輸入。該指令調用$ scope。$ apply，因爲它使用了element.bind，它沒有將操作鏈接到$ scope。