AngularJS服務中的變量未在視圖中更新？

Question

我花了兩天的時間把我的頭撞在桌子上，閱讀博客文章，以及圍繞我的問題提出的問題。我嘗試了以下代碼的幾種變體，至今沒有任何變化。我將不勝感激任何幫助。

服務內部的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服務：

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

然後，在控制器中，從許提取數據：

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

有關詳細信息，請參閱AngularJS $http Service API Reference。