AngularJs - Direktive nicht Controller Variablen aktualisieren

Question

Vor allem muss ich nur sagen, dass ich eine vollständige google/stackoverflow Suche in Bezug auf dieses Problem und ich konnte nichts finden, was helfen würde.

Also, mit, dass hinter uns, hier ist mein Problem:

ich diese Richtlinie habe, die die Daten in einer einfachen Eingabetyp Datei ausgewählt zurückgeben sollten. In meinem console.log kommt die Daten gut, aber wenn ich nach der Wertänderung in meinem Controller sehe, tut es einfach nie.

Hier ist meine Richtlinie:

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

Mein Controller:

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

    } 
]); 

Meine Ansicht:

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

Answer 1

Sie scheint einen Tippfehler in der Richtlinie Definition Objekt gemacht werden, wo $scope sollte sei scope.

---

würde Ich mag einige Dinge vorschlagen, um Ihren derzeitigen Ansatz zu verbessern, anstatt watcher in übergeordnetem Controller-Methode verwendet wird. Sie sollten einen Callback an die Direktive übergeben und sie aufrufen, sobald Sie das Reader-Objekt geladen haben. Was stellt sich heraus, dass Ihre isoliert Umfang wie unter

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

erscheinen wird und dann neue Methode innerhalb Controller setzen, wo wir eine Datei Daten an diese Methode übergeben wird. richtig

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

Call-Methode aus der Richtlinie Code

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

Und dann von Element Passcallback-Methode korrekt auf Richtlinie.

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