CODEWITHSUNDEEP
angularjsmeteorionic-frameworkangular-meteor
younes sofiane
younes sofiane

Reputation: 451

Angular-meteor: changing model value doesn't change view

I'm working on a todo app using angular-meteor and ionic. I have a view with a input and a list. When I click on edit, the name of the item should appear on the input and you edit it, and then you apply. This far, everything works fine, but after you apply the change, the text you entered gets stuck there, and if you click on another todo to edit it, its title doesn't show up in the input, but if you write something and click apply, it changes.

enter image description here

here is the code for the view:

<ion-view view-title="Task ongoing">
    <ion-content>
            <div class="item item-input-inset">
                <label class="item item-input">
                    <input type="text" ng-model="n" placeholder="click on a task to edit it">
                </label>
                <button class="button button-balanced button-small"
                        style="margin:1%"
                        ng-click="editTask(n)">
                    <span class="glyphicon glyphicon-plus"></span> Apply</button>
            </div>
        <ion-item ng-repeat="t in todos | filter:'ongoing'">
          {{t.name}} <strong>{{t.status}}</strong> <span class="badge" ng-click="enableEditTask(t)" >Edit</span>
            <span class="badge" ng-click="makeTaskDone(t)" style="right: 67px" >Done</span>
        </ion-item>
    </ion-content>
</ion-view>

Here is the methods code in the server:

Meteor.methods({
        makeDone:function(task){
            Todos.update({_id:task._id},{$set:{status:'done'}});
        },
        editTask:function(name,task){
            Todos.update({_id:task._id},{$set:{name:name}});
        }
    })

and here the code on the client (angular)

$scope.makeTaskDone=function(task){
                Meteor.call('makeDone',task);
            };

            $scope.enableEditTask = function(task) {
                $scope.task=task;
                $scope.n=task.name;
            };

            $scope.editTask=function(name){
                Meteor.call('editTask',name,$scope.task);
                $scope.n="";
            }

I think the problem happens after the Todos.update gets called, because when I tried without, everything works fine.

Ps: I tried this with the insecure package, and the same problem occured.

Upvotes: 0

Views: 129

Answers (1)

Owain Llewellyn
Owain Llewellyn

Reputation: 1

If you are making changes to the $scope model outside of angular you should be calling your method in $scope.$apply(...) . This is so angular can run a digest and pickup the changes then update the view (ngDocs). This applies to all async functions not called by angular.

Upvotes: 0

Related Questions