Question

我正在学习AngularJS和Ionic为一个学期项目创建一个应用程序，但我找不到资源向我展示如何解决我的问题，所以我打电话给所有NG和Ionic专业人士：

我正在尝试将事件添加到我的＆homecontrl＆＃39;中定义的事件数组中。控制器并显示在我的家中＆＃39;从另一个视图中查看名为＆＃39; createEvent＆＃39;它使用控制器＆＃39; createEventCtrl＆＃39;。

我可以点击“主页”中的按钮添加到数组中。查看，但＆＃39; createEvent＆＃39;中的按钮调用相同函数的视图newEvent（）不起作用。

以下是我的问题：如何传递来自＆＃39; createEvent＆＃39;的信息？ view，正在使用＆＃39; createEventCtrl＆＃39;控制器显示在＆＃39; home＆＃39; view，使用＆＃39; homeCtrl＆＃39;？

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

使用表单填充数组并在单独的视图angularjs中显示数组

1 个答案: