我必须刷新AngularJS页面才能看到我的更改

Question

I have to refresh the page to see changes, Angular is a two-way binding but seems for my problem it is behaving like one-way. I've been trying to solve this problem since 1 hour ago and couldn't find any solution to it.

index.html

<div ng-controller="tweetController as tweet">
            <form>  <!-- USERNAME INPUT -->
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" class="form-control" ng-model="tweet.tweetData.title">
                </div>

                <!-- PASSWORD INPUT -->
                <div class="form-group">
                    <label>Tweet Content</label>
                    <input type="text" class="form-control" ng-model="tweet.tweetData.content">
                </div>

                <!-- LOGIN BUTTON -->
                <button ng-click= "tweet.createTweet()" type="submit" class="btn btn-block btn-primary">
                    <span>Create Tweet</span>
                </button>

        </form>

        <tr ng-repeat="tw in tweet.tweets">
                    <td>{{ tw._id }}</td>
                    <td>{{ tw.title }}</td>
                    <td>{{ tw.content }}</td>                   
        </tr>

    </div>

tweetCtrl.js

angular.module('tweetCtrl', ['tweetService'])

.controller('tweetController', function(Tweet) {

    var vm = this;

    Tweet.all()
        .success(function(data) {
            vm.tweets = data;
        });


    vm.createTweet = function() {
        vm.processing = true;

        vm.message = '';

        Tweet.create(vm.tweetData) 
            .success(function(data) {
                vm.processing = false;

                // clear the form
                vm.tweetData = {}
                vm.message = data.message;
            });
    };

});

service.js

angular.module('tweetService', [])


.factory('Tweet', function($http) {

    // get all approach
    var tweetFactory = {};

    tweetFactory.all = function() {
        return $http.get('/api/');
    }


    tweetFactory.create = function(tweetData) {
        return $http.post('/api/', tweetData);
    }

    return tweetFactory;

});

Answer 1

You need to push your new tweet to your tweets collection - that won't automatically update. As far as I can see, you only ever call .all() on page load, so simply push to the array once your create is done:

vm.createTweet = function() {
    vm.processing = true;

    vm.message = '';

    Tweet.create(vm.tweetData) 
        .success(function(data) {
            vm.processing = false;

            // clear the form
            vm.tweetData = {}
            vm.message = data.message;

            //show the new tweet in the view
            vm.tweets.push(data); //assuming "data" is the returned tweet
        });
};