AngularJS服务中的变量不是在视图中更新吗? [英] AngularJS Variable in service is not updating in view?

问题描述

我花了几天的时间将头撞到桌子上，阅读博客文章，以及关于我的问题的问题.我尝试了下面的代码的几种变体，但到目前为止还没有奏效.我将不胜感激任何帮助.

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.

服务中的taskList变量确实会更新，但控制器中的那个不会更新.

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

控制器

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>

推荐答案

从服务中返回$ http承诺:

Return the $http promise from the service:

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

然后在控制器中，从promise中提取数据:

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;
        });    
    };
});

有关更多信息，请参见 AngularJS $ http服务API参考.

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

这篇关于AngularJS服务中的变量不是在视图中更新吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！