JavaScript not updating part of $scope variable

Question

for reference, I am using a MEAN stack with Restangular for API calls.

The post.tags variable is an array of strings that my script is supposed to update (along with the rest of the object). The problem is, the tags variable is not updating while other variables within the post object have no trouble.

I join the array into a single string so that it can be easily modified in the view before updating, but I suspect that line is also what is causing it to not update correctly. I have a console log inserted to verify that $scope.tags did not update when I click the save button in the view. A little two-way binding in the view also shows that it does get updated prior to pressing save, but once that button is pressed, it reverts back to the original value.

This seems like a fairly trivial problem, but I am having trouble finding a solution. Any help would be greatly appreciated.

post-edit.js

.controller('PostEditCtrl', function ($scope, $location, $routeParams, Post) {       
  $scope.editPost = true;
  $scope.post = {};
  Post.one($routeParams.id).get().then(function(post) {
    $scope.post = post;
    $scope.tags = $scope.post.tags.join();
    $scope.savePost = function() {
      $scope.post.tags = $scope.tags.replace(/[\s]/g, '').split(',');
      console.log($scope.tags);
      $scope.post.save().then(function() {
        $location.path('/post/' + $routeParams.id);
      });
    };
  });
});

post-edit.html

...
<div class="form-group">
  <label for="content" class="control-label">Tags</label>
  <input type="text" ng-model="tags" class="form-control" id="tags" placeholder="Enter a comma separated list of tags">
  <p>{{tags}}</p>
</div>
...

Try adding the $scope.tags = $scope.post.tags.join(); line after the $scope.post.tags update in your savePost() function. You expect it to automatically get updated, but it won't, it's not bound to a member of the #scope object. — trans1st0r
– trans1st0r, Commented Apr 14, 2016 at 0:28
Hey sorry for the delay and thanks for the help, first time using stackoverflow and thought I set up email notifications properly... The join() was intentionally put before because it converts the array of tags into a comma separated string for the user to edit in the view. If you move it to within the savePost() function, then the view doesn't get a string that the user can edit. — CudB
– CudB, Commented Apr 14, 2016 at 21:48
The problem is after $scope.savePost() is called, any changes to $scope.tags isn't recognized and $scope.savePost() uses the original value when performing the line $scope.post.tags = $scope.tags.replace(/[\s]/g, '').split(','); — CudB
– CudB, Commented Apr 14, 2016 at 22:00

CudB · Accepted Answer · 2016-04-14 22:41:28Z

1

Fixed my problem by not using the temporary variable $scope.tags at all and just using $scope.post.tags. Final JS file is below:

post-edit.js

.controller('PostEditCtrl', function ($scope, $location, $routeParams, Post) {       
  $scope.editPost = true;
  $scope.post = {};
  Post.one($routeParams.id).get().then(function(post) {
    $scope.post = post;
    $scope.post.tags = $scope.post.tags.join();
    $scope.savePost = function() {
      $scope.post.tags = $scope.post.tags.replace(/[\s]/g, '').split(',');
      $scope.post.save().then(function() {
        $location.path('/post/' + $routeParams.id);
      });
    };
  });
});

answered Apr 14, 2016 at 22:41

CudB

939 bronze badges

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

2 Comments

trans1st0r Over a year ago

I wonder why $scope.tags is not being updated, even if it is bound to the text input.

CudB Over a year ago

Yeah I was wondering about that too and am honestly not too sure. For the solution I only removed the temporary variable so it must be some little quirk that I'm missing.

Collectives™ on Stack Overflow

JavaScript not updating part of $scope variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related