如何将数据从指令功能传递到服务？

Question

我正在尝试在angularjs中构建一个非常简单的玩具“日历”应用程序。 这非常简单 - 一个日期列表，其中包含通过“添加约会”链接向任何一天添加“约会”的功能。

我已经创建了我的“添加约会”链接作为指令，目前看起来像这样：

指示

angular.module('calendarApp')
  .directive('newAppointment', function (Appointments) {
    return {
      templateUrl: 'views/newAppointment.html',
      restrict: 'E',
      scope: {
      },
      link: function (scope, element, attrs) {
        scope.expanded = false;
        scope.expand = function() {
          if(scope.expanded)
          {
            scope.expanded = false;
          }
          else
          {
            scope.expanded = true;
          }
        }

        scope.newAppointment = {};
        scope.newAppointment.startTime = new Date();
        scope.newAppointment.endTime = new Date();
        scope.newAppointment.description = '';

        scope.createAppointment = function()
        {
          Appointments.addAppointment(scope.newAppointment);
        }
      }
    };
  });

指令模板

<a ng-hide="expanded" ng-click="expand()">Create Appointment</a>
<div ng-show="expanded">
    <h3>Create Appointment</h3>
    <input type="text" ng-model="newAppointment.description" /><br />
    <button ng-click="addAppointment(newAppointment)">Create Appointment</button>
    <a ng-click="expand()">Cancel</a>
</div>

服务

angular.module('calendarApp')
  .service('Appointments', function Appointments() {
    var appointments = new Array();

    // appointments fixture data removed for brevity

    this.appointments = appointments;

    this.addAppointment = function(appointment) {
      this.appointments.push(appointment);
      console.log(this.appointments);
    }
  });

我的指令的每个部分都按照我的意图运行，除了“添加约会”功能。 我无法弄清楚如何将在我的指令范围内创建的约会发送到我的服务的addAppointment方法。 一个对象被添加到服务中的约会数组中，但它是一个垃圾/非感知对象，而不是由指令范围中的表单创建的对象。

如何从指令将信息传递回我的服务？

Answer 1

如果您可以解释/显示“垃圾”对象的样子会有所帮助，但很明显您没有正确初始化newAppointment对象。

您将其初始化为字符串： scope.newAppointment = ''; ，实际上你应该将它初始化为object： scope.newAppointment = {};

此外，在您的服务中，您正在将booking推送到约会阵列，而您实际上是想推送appointment 。

此外，您的方法名为createAppointment但您在ng-click调用addAppointment 。

您的代码中还有许多其他较小的问题和冗余。

这是一个经过审核的工作版本：

PLUNKER

app
  .service('Appointments', function Appointments() {
    this.appointments = [];
    this.addAppointment = function(appointment) {
      this.appointments.push(appointment);
      console.log(this.appointments);
    }
  });

app.directive('newAppointment', function (Appointments) {
  return {
    templateUrl: 'newAppointment.html',
    restrict: 'E',
    scope: {},
    link: function (scope, element, attrs) {
      var time = new Date();
      scope.newAppointment = {
        startTime: time,
        endTime: time,
      };

      scope.addAppointment = function(){
        console.log('Adding...');
        Appointments.addAppointment(scope.newAppointment);
      }
    }
  };
});

<a ng-hide="expanded" ng-click="expanded=true">Create Appointment</a>
<div ng-show="expanded">
  <h3>Create Appointment</h3>
  <input type="text" ng-model="newAppointment.description" /><br />
  <button ng-click="addAppointment()">Create Appointment</button>
  <a ng-click="expanded=false;">Cancel</a>
</div>