-2

I am in the process of learning AngularJS and Ionic to create an app for a semester project, but I am having trouble finding a resource to show me how to solve my problem, so I am calling all NG and Ionic pros out there:

I am trying add an event to an array of events defined in my 'homeCtrl' controller and displayed in my 'home' view from a different view called 'createEvent' that uses the controller 'createEventCtrl'.

I am able to add to the array by clicking a button in the 'home' view, but a button in the 'createEvent' view that calls the same function newEvent() does not work.

Here is my question: How can I pass the information from the 'createEvent' view, which is using the 'createEventCtrl' controller to the array displayed on the 'home' view, which uses the '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>
loukkevin
  • 3
  • 2

1 Answers1

1

You need an angular service. You create the event in the service, and the service objects are accesible from all controllers.

For example:

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

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

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

  return service;


}]);

And then, from your controllers:

 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"
          });
        }
      })
atc
  • 605
  • 11
  • 22