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