AngularJS Variable in service is not updating in v

问题:

I have spent a couple of days banging my head against the table, reading blog posts, and SO questions around my issue. I tried several variations of the code I have below and none has worked so far. I would appreciate any help.

The taskList variable inside the service does update, but the one in the controller does not.

Controller

angular.module("TaskManager").controller("mainController", function ($scope, API) {

    $scope.init = function () {
        console.log("Initializing app");
        API.getTasks();

    }


    $scope.tasks = API.taskList;

    $scope.$watch(function(){return API.taskList}, function(newVal, oldVal){

        alert("This is tasklist in controller" + newVal);
    }, true)


});

Service

angular.module("TaskManager").service("API", function ($http, $rootScope) {

    const apiKey = "PUH";
    var taskList = [1,2,3,4];
    const getTasks = function () {
        $http.get("https://api.mlab.com/api/1/databases/jquerytaskmanager/collections/tasks?apiKey=" + apiKey).then(function (data) {
           taskList = data; 
           console.log(taskList);
        });
    };

    $rootScope.$watch(function(){return taskList}, function(newVal, oldVal){

        alert(taskList);
        taskList = newVal;


        console.log(taskList);

    }, true)

    return {
        getTasks,
        taskList

    }
});

View

<div class="row">
    <div class="col s12">

        <ul id="mainMenu" class="right hide-on-med-and-down">
            <li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a></li>
            <li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-plus" aria-hidden="true"></i> Add Task</a></li>
            <li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-pencil" aria-hidden="true"></i> Manage Categories</a></li>
        </ul>

    </div>

</div>

<div class="mainContainer container">
    <div class="row">
        <div class="col 6">
            <h2>Tasks</h2>



        </div>

    </div>



            <ul>
                <li class="taskContainer" ng-repeat="task in tasks" >

                    <div class="row">
                        <div class="col s6">
                             <span class="taskName"> {{task.task_name}}</span> 
                        </div>

                        <div class="col s6">
                            <button class="btn blue darken-4 waves-effect waves-light  ">Edit</button> <button class="btn red darken-4 waves-effect waves-light ">Delete</button>
                        </div>

                    </div>


                </li>

            </ul>








</div>

回答1:

Return the $http promise from the service:

app.service("API", function($http) {
    this.getTasks = function() {
        return $http.get(url);
    };
});

Then in the controller, extract the data from the promise:

app.controller("mainController", function($scope, API) {
    this.$onInit = function () {
        console.log("Initializing app");
        API.getTasks().then(function(response) {
            $scope.tasks = response.data;
        });    
    };
});

For more information, see AngularJS $http Service API Reference.