Angular directive modifies scope, but not after 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>

I'm trying to implement a custom dropzone directive that incorporates the html5 Filereader API. The filereader is intended to modify scope outside of the dropzone directive.

As you can see from this fiddle: http://jsfiddle.net/HB7LU/7514/. The code initally binds the directive scope to the html, but doesn't after the timeout (my minimal reproduction of the file drop action) - why is this? How would I fix this?

possible duplicate of How to change value after delay by using angularjs? — Ivan Chernykh
– Ivan Chernykh, Commented Oct 22, 2014 at 14:10

Mik378 · Accepted Answer · 2014-10-22 14:04:43Z

3

You should use $timeout instead of setTimeout.
Of course, you need to inject it in your controller/service.

The benefit (in that case) is that $timeout involves a digest, in order to synchronize the scope's values.

Otherwise, you would manually call apply like this (but not recommended) :

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

edited Oct 22, 2014 at 14:04

answered Oct 22, 2014 at 13:59

Mik378

22.2k15 gold badges95 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joseph Over a year ago

Thanks Mik378. My code is actually slightly more complex. It looks like I might have to use scope.$apply. Is this jsfiddle an appropriate use of scope.$apply: jsfiddle.net/HB7LU/7515

Joseph Over a year ago

Whoops, that was still testing code. I'm referring the reader.onload method.

Mik378 Over a year ago

One tips is to encapsulate your function with $timeout and 0 as delay. It would just involve the digest directly. => therefore, no need for scope.$apply.

Mojtaba Nejad Poor Esmaeili · Accepted Answer · 2024-01-20 18:55:13Z

0

you can call detectChanges() after changing xmlData:

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

answered Jan 20, 2024 at 18:55

Mojtaba Nejad Poor Esmaeili

1,4141 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular directive modifies scope, but not after setTimeout

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related