Sharing Objekt-Array zwischen den Controllern beim Arbeiten mit modalen Fenster in angularJS

Question

Ich versuche mit einem Objekt-Array zu arbeiten, die ich unter zwei Controllern teilen, von denen einer mit modalen Fenster befasst ist.

Hier ist der JS-Code.

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ui.bootstrap']) 
    .service('Faq', function ($http) { 
    this.faqList = []; 
    this.faqList = $http.get('/Json/faq.json'); 

    this.getFaqs = function() 
    { 
     return this.faqList; 
    } 

    this.addfaq = function (obj) { 
     this.faqList.push(obj); 
    }; 


}) 
.controller('AppCtrl', function ($scope,$modal,Faq) { 



    $scope.faqData = []; 

    Faq.getFaqs().then(function (msg) { 
     $scope.faqData = msg.data; 

    }); 

    } 

    $scope.show = function() { 
     $modal.open({ 
      templateUrl: "faqAddUpdate.html", 
      controller: "faqctrl" 
     }); 
    }; 


}) 
.controller('faqctrl', function ($scope, $modalInstance, Faq) { 
    $scope.question = ''; 
    $scope.id = ''; 
    $scope.answer = ''; 

    $scope.editFaq = function (id) { 
     $scope.divFaq = true; 
     $scope.faqs = []; 
     Faq.getData().then(function (msg) { 
      $scope.faqs = msg.data; 
      var l = $scope.faqs.length; 
      for (var i = 0; i < l; i++) { 
       if ($scope.faqs[i].id == id) { 
        $scope.question = $scope.faqs[i].question; 
        $scope.id = $scope.faqs[i].id; 
        $scope.answer = $scope.faqs[i].answer; 

       } 
      } 
     }); 
    }; 


    $scope.AddUpdateFAQ = function() { 
     var faq = { 
      id: $scope.id, 
      question: $scope.question, 
      answer: $scope.answer 
     }; 
     Faq.addfaq(faq); 
     console.log(faq); 
     $modalInstance.close(); 
    }; 

    $scope.Cancel = function() { 
     $modalInstance.dismiss(); 
    }; 
}); 

aber wenn ich die Daten über den modalen vorlege sagt es this.faqList.push keine Funktion ist.

Answer 1

Das liegt daran, dass Ihre faqList-Variable kein Array ist.

Sie overide die erste Definition:

this.faqList = []; 

mit diesem:

this.faqList = $http.get('/Json/faq.json'); 

Aber $ http.get gibt ein Versprechen (siehe doc), kein Array.

Sie sollten etwas tun:

this.faqList = []; 
$http.get('/Json/faq.json').then(function(result) { 
    // process your results here 
    this.faqList = result.data; 
}); 

Answer 2

nicht versucht, aber this ist im Funktionsumfang, so erstellen _this var ersten helfen könnten:

this.faqList = []; 
this.faqList = $http.get('/Json/faq.json'); 
var _this = this; 

this.getFaqs = function() 
{ 
    return _this.faqList; 
} 

this.addfaq = function (obj) { 
    _this.faqList.push(obj); 
};