Angular 指令修改范围，但在 setTimeout 之后不修改

Question

// 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，但在超时后却没有绑定（我对文件删除操作的最小再现） - 这是为什么？我该如何解决这个问题？

Answer 1

您应该使用

$timeout

而不是

setTimeout

。
当然，您需要将其注入您的控制器/服务中。

好处（在这种情况下）是

$timeout

涉及摘要，以便同步范围的值。

否则，你会像这样手动调用

apply

（但不推荐）：

setTimeout(function() {
                scope.$apply(function(){
                  scope.fileData.xmlData = "something";
               };
            }, 1000);

Answer 2

更改 xmlData 后可以调用 detectorChanges():

scope.fileData.xmlData = "something";
this.cdrf.detectChanges();