Update textbox value $on event

Question

I have the following eventhandler:

$scope.$on("fileSelected", function (event, data) {

        switch (data.model) {
            case "ImageFile":
                self.item.ImageFile = data.file;
                self.item.ImageFileName = data.file.name;
                break;
           default:
                self.item.IconFile = data.file;
                self.item.IconFileName = data.file.name;

        }

    });

the method does execute as expected. However, updating the value of self.item.IconFileName when the above method executes does not update in the ui. Below is my html.

<input id="IconFile" class="form-control control-label col-md-2" type="text" ng-bind="cc.item.IconFileName">

What is it that I am missing?

can you share code where you are triggering `fileSelected` event ? and what is `self` variable in this code ? and why inside event you are updating `self.item.IconFileName` and in template you are binding `cc.item.IconFileName` ? — jad-panda, May 23 '15 at 14:16
@jad-panda - yes, controller as syntax. I needed to call $scope.apply for the model values to be updated and shown in the ui. — FiveTools, May 23 '15 at 15:24

score 0 · Accepted Answer · answered May 23 '15 at 15:17

I needed to call $scope.apply

$scope.$on("fileSelected", function (event, data) {

          $scope.$apply(function() {
            switch (data.model) {
            case "PromotionalLargeImageFile":
                self.item.PromtionalLargeImageFile = data.file;
                self.item.PromtionalLargeImageFileName = data.file.name;
                break;
            case "PromotionalThumbnailImageFile":
                self.item.PromotionalThumbnailImageFile = data.file;
                self.item.PromotionalThumbnailImageFileName = data.file.name;
                break;
            default:
                self.item.MiniMiniIconFile = data.file;
                self.item.MiniMiniIconFileName = data.file.name;
            }

        });

});

score 0 · Answer 2 · edited May 23 '17 at 12:30

You should use $timeout instead of $scope.$apply, if possible. $scope.$apply can raise $digest already in progress error. for more information you can see this answer Angular $scope.$apply vs $timeout as a safe $apply

$scope.$on("fileSelected", function (event, data) {
       $timeout(function() {
            switch (data.model) {
               case "PromotionalLargeImageFile":
                  self.item.PromtionalLargeImageFile = data.file;
                  self.item.PromtionalLargeImageFileName = data.file.name;
                  break;
              case "PromotionalThumbnailImageFile":
                  self.item.PromotionalThumbnailImageFile = data.file;
                  self.item.PromotionalThumbnailImageFileName = data.file.name;
                  break;
              default:
                  self.item.MiniMiniIconFile = data.file;
                  self.item.MiniMiniIconFileName = data.file.name;
            }
      });
});

Update textbox value $on event

2 Answers2