サービス内のAngularJS変数が表示されていませんか？

Question

私はテーブルの上に頭を叩いて、ブログ記事を読んで、私の問題の周りのSOの質問を数日過ごしました。私は以下のコードのいくつかのバリエーションを試してみましたが、これまでに何も働いていませんでした。助けていただければ幸いです。

サービス内のtaskList変数は更新されますが、コントローラ内のtaskList変数は更新されません。

コントローラ

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) 


}); 

サービス

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 

    } 
}); 

ビュー

<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> 

Answer 1

戻り目から$はhttpの約束Eサービス：AngularJS $http Service API Referenceを参照してください

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

：

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

そしてコントローラに、約束からデータを抽出します。