सेवा में AngularJS वैरिएबल को अद्यतन में अद्यतन नहीं किया जा रहा है?



service (1)

मैंने कुछ दिनों तक टेबल के खिलाफ मेरे सिर की घंटी बजती है, ब्लॉग पोस्ट पढ़ी है, और मेरे मुद्दे के बारे में कुछ प्रश्न हैं I मैंने नीचे दिए गए कोड के कई रूपों की कोशिश की और कोई भी अब तक काम नहीं कर रहा है। किसी भी सहायता के लिए धन्यवाद।

सेवा के अंदर कार्यसूची चर को अद्यतन करता है, लेकिन नियंत्रक में कोई नहीं करता है।

नियंत्रक

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>

https://code.i-harness.com


सेवा से $ http वादा वापस करें:

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