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，但您在addAppointment中呼叫ng-click。

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

以下是经过审核的工作版本：

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>

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

1 个答案: