// JavaScript
var a = angular.module('minimalReproApp', [
])
a.controller('MainCtrl', function($scope) {
$scope.fileData = {}
$scope.fileData.xmlData = "ControllerScope";
}).directive('dropzone', function() {
return {
restrict: 'AE',
scope: '=',
transclude: true,
link: function(scope, elem) {
console.log(scope)
console.log(scope.fileData.xmlData)
scope.fileData.xmlData = "directive";
setTimeout(function() {
console.log(1000)
scope.fileData.xmlData = "something";
}, 1000)
}
};
});
//html
<div ng-app="minimalReproApp">
<div ng-controller="MainCtrl">
{{a}}
<div class="jumbotron" dropzone>
</div>
<div>{{fileData.xmlData}} </div>
</div>
我正在尝试实现一个包含 html5 Filereader API 的自定义 dropzone 指令。文件读取器旨在修改 dropzone 指令之外的范围。
正如您从这个小提琴中看到的:http://jsfiddle.net/HB7LU/7514/。该代码最初将指令范围绑定到 html,但在超时后却没有绑定(我对文件删除操作的最小再现) - 这是为什么?我该如何解决这个问题?
您应该使用
$timeout
而不是 setTimeout
。好处(在这种情况下)是
$timeout
涉及摘要,以便同步范围的值。
否则,你会像这样手动调用
apply
(但不推荐):
setTimeout(function() {
scope.$apply(function(){
scope.fileData.xmlData = "something";
};
}, 1000);
更改 xmlData 后可以调用 detectorChanges():
scope.fileData.xmlData = "something";
this.cdrf.detectChanges();