使用表單填充數組並在不同視圖中顯示數組angularjs

Question

我正在學習AngularJS和Ionic創建一個學期項目的應用程序，但我無法找到資源來向我顯示如何解決我的問題，所以我打電話給所有的NG和Ionic專業人士：

我想添加一個事件到我的'homeCtrl'控制器中定義的事件數組，並顯示在我的'家'視圖從一個不同的視圖調用'createEvent'使用控制器'createEventCtrl'。

我可以通過點擊'home'視圖中的按鈕來添加數組，但調用相同函數的'createEvent'視圖中的按鈕newEvent（）不起作用。

這是我的問題：如何將'createEvent'視圖的信息從'createEventCtrl'控制器傳遞到'home'視圖中使用'homeCtrl'顯示的數組？

JS：

app.controller('createEventCtrl', function($scope) { 

    $scope.newEvent = function() { 
     $scope.events.push({ 
      title: "Event 3", 
      description: "Event description", 
      location: "Event Location", 
      price: "Event price", 
      category: "Event category", 
      date: "Event date" 
      }) 
     } 

     }) 

app.controller('homeCtrl', function($scope) { 

     $scope.events = [];  //array of events displayed on home view 

     $scope.newEvent = function() { //function that adds an event to the array 
      $scope.events.push({ 
      title: "Event 3",  //Simple test data 
      description:"Event description", 
      location: "Event Location", 
      price: "Event price", 
      category: "Event category", 
      date: "Event date" 
      }) 
     } 
     }) 

HTML：

home.html的：

<ion-view title="Home"> 

<ion-content padding="'true'" class="has-header"> 

    <div class = "buttons"> <button class="button" ng-click = "newEvent()"> New Event </button> </div> 


    <div class="spacer" style="width: 300px; height: 50px;"></div> 
    <ion-list> 
     <ion-item ng-repeat="event in events" menu-close=""class="item-thumbnail-left" href="#/event1"> 
      <img> 
      <h2>{{event.title}}</h2> 
      <p>{{event.description}}</p> 
      <p>{{event.location}}</p> 
      <p>{{event.price}}</p> 
      <p>{{event.category}}</p> 
      <p>{{event.date}}</p> 
      <a menu-close="" href="#/event1" class="button button-positive button-clear button-block ">Attend</a> 
     </ion-item> 
    </ion-list> 
    <a menu-close="" href="#/login" class="button button-icon icon-right ion-log-out">Log Out</a> 
</ion-content> 
</ion-view> 

createEvent.html

<ion-view title="Create Event"> 
<ion-content padding="'true'" class="has-header"> 
    <form ng-submit=newEvent(event)> 
     <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Event Name</span> 
      <input type="text" placeholder="Enter event name" ng-model="event.title"> 
     </label> 
     <div class="spacer" style="width: 300px; height: 8px;"></div> 
     <label class="item item-input"> 
      <span class="input-label">Event Location</span> 
      <input type="text" placeholder="Enter event address" ng-model="event.location"> 
     </label> 
     <div class="spacer" style="width: 300px; height: 8px;"></div> 
     <label class="item item-input" name="eventDate"> 
      <span class="input-label">Event Date</span> 
      <input type="text" placeholder="MM/DD/YYYY" ng-model="event.date"> 
     </label> 
     <div class="spacer" style="width: 300px; height: 8px;"></div> 
     <label class="item item-input"> 
      <span class="input-label">Event Description</span> 
      <input type="text" placeholder="Enter event description" ng-model="event.description"> 
     </label><div class="spacer" style="width: 300px; height: 8px;"></div> 
     <label class="item item-input" name="event.price"> 
      <span class="input-label">Event Price $</span> 
      <input type="text" placeholder="Enter price or 0 for free" ng-model="event.price"> 
     </label> 
     <div class="spacer" style="width: 300px; height: 8px;"></div> 
     <label class="item item-select"> 
      <span class="input-label">Event Category</span> 
      <select> 
       //Need to figure out how to make a list of categories 
       //drop down and how to save the input choice into event.category 

      </select> 
     </label> 
     <div class = "buttons"> <button class="button" ng-click = "newEvent()"> New Event </button> </div> 
    </form> 
</ion-content> 
</ion-view> 

Answer 1

您需要的角度服務。 您可以在服務中創建事件，並且可以從所有控制器訪問服務對象。

例如：

angular.module('yourmodule') 
.factory('eventService', 
[ 
function(){ 
    var service = {}; 
    var events = []; 

    services.addEvent = function(event){ 
    events.push(event); 
    }; 

    service.getEvents = function() { 
     return events; 
    }; 

    return service; 


}]); 

，然後從你的控制器：

app.controller('homeCtrl', function($scope, eventService) { 

     $scope.events = eventService.getEvents();  //array of events displayed on home view 

     $scope.newEvent = function() { //function that adds an event to the array 
      eventService.addEvent({ 
      title: "Event 3",  //Simple test data 
      description:"Event description", 
      location: "Event Location", 
      price: "Event price", 
      category: "Event category", 
      date: "Event date" 
      }); 
     } 
     })