AngularJs - 不更新控制器變量的指令

Question

在我只是說我做了一個完整的谷歌/ stackoverflow搜索關於這個問題，我找不到任何幫助。

所以，與我們後面，這裏是我的問題：

我有這個指令，它應該回到一個簡單的輸入類型的文件選擇的數據。 在我的console.log數據出來很好，但當我注意到我的控制器中的值更改它根本就不會。

這裏是我的指令：

app.directive('esFileRead', [ 
    function() { 
     return { 
      restrict: 'A', 
      $scope: { 
       esFileRead: '=' 
      }, 
      link: function ($scope, $elem) { 
       $elem.bind('change', function (changeEvent) { 
        if (FileReader) { 
         var reader = new FileReader(); 
         reader.onload = function (loadEvent) { 
          $scope.$apply(function() { 
           $scope.esFileRead= loadEvent.target.result; 
           console.log($scope.esFileRead); 
          }); 
         }; 
         reader.readAsDataURL(changeEvent.target.files[0]); 
        } 
        else { 
         // FileReader not supported 
        } 
       }); 
      } 
     } 
    } 
]); 

我的控制器：

app.controller('MainController', [ 
    '$rootScope', 
    '$scope', 
    'DataManagementService', 
    function ($rootScope, $scope, DataManagementService) { 
     $scope.importFile = ""; 

     $scope.$watch('importFile', function (newValue, oldValue) { 
      console.log(newValue); 
      if(newValue && newValue !== oldValue) { 
       DataManagementService.importData(newValue); 
      } 
     }); 

    } 
]); 

我的觀點：

<input id="btnImport" type="file" es-file-read="importFile"/> 

Answer 1

你似乎作出指令定義對象一個錯字，其中$scope應是scope。

---

我想建議一些事情來改善你目前的做法，而不是在父控制器方法使用watcher。您應該將回調傳遞給指令，並在加載完讀者對象後立即調用它。這證明，你的孤立範圍將出現如下圖所示

restrict: 'A', 
scope: { 
    callback: '&' 
}, 

，然後把新方法內部控制器，我們將通過一個文件中的數據，以該方法。

$scope.importData = function(data) { 
    DataManagementService.importData(newValue); 
}); 

然後從元通回調方法正確的指令

<input id="btnImport" type="file" es-file-read callback="importData(data)"/> 

調用方法從指令代碼正確。

reader.onload = function (loadEvent) { 
    $scope.$apply(function() { 
     $scope.esFileRead= loadEvent.target.result; 
     $scope.callback({ item: $scope.esFileRead }); 
    }); 
};