javascript - 如何将数据从指令函数传递到服务？

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 = '';，而您实际上应该将其初始化为对象: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>