Angularjs ns-style change via Controller

Question

I am trying to change background color of div. Mine html code is below:

<div ng-style="{'background-color': backgroundImageInfo}">
    <input type="file" onchange="angular.element(this).scope().fileThatChangeBackground(this)" />
</div>

Mine js code inside controller:

$scope.backgroundImageInfo='red';
$scope.fileThatChangeBackground = function() {
    alert($scope.backgroundImageInfo);
    $scope.backgroundImageInfo='blue';
};

First line of controller change background color to red. When i am set file to input alert show 'red' and did not change background color to blue. When i change file of input(fire function) alert show 'blue' and again did not change background color. Why ng-style dont change color when i change value from function?

Josep · Accepted Answer · 2014-10-16 21:05:53Z

1

Since you're calling the fileThatChangeBackground function from outside Angular, you will need to do $scope.$apply if you want this to work. Like this:

angular.module('testApp',[])
.controller('testCtrllr', function($scope){
    $scope.backgroundImageInfo='red';    
    $scope.fileThatChangeBackground = function(scope) {                    
        $scope.$apply(function(){
            $scope.backgroundImageInfo='blue';
        });
    };
});

Working example

answered Oct 16, 2014 at 21:05

Josep

13.1k2 gold badges45 silver badges45 bronze badges

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

1 Comment

Josep Over a year ago

@GoncharDenys no problem, any time!

Collectives™ on Stack Overflow

Angularjs ns-style change via Controller

1 Answer 1

Working example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related