Angular -如何创建一个可重用的"将记录推入父作用域的窗体或部分

Angular - How to create a reusable "create record" form or partial that pushes a record onto the parent scope

本文关键字：记录 窗体 作用域 quot 创建 何创建 Angular 一个      更新时间：2023-09-26

我的Angular设置:我有一个"Edit invite "状态，它的作用域是一个邀请。邀请函有一个宾客列表——由一个guestList控制器控制——在我的视图中迭代。

<div ng-controller="guestListCtrl as guestList">
    <div ng-repeat="guest in invitation.guests">
    {{ guest.name }}
    </div>
</div>

在我的列表末尾，有一个添加新来宾的按钮。这将切换一个小表单，允许用户保存新的访客记录。

<form name="addGuest" class="form" ng-submit="addGuest.$valid && guestList.addGuest(guestList.newGuest)" novalidation>

这一切都很好-我的控制器处理添加新客人并将新客人推到其父guestList上。客人范围。

但是，在我的Admin页面上，我基本上有相同的设置。我显示了一个由guestList控制器控制的客人列表，它允许我通过相同的表单添加新客人。唯一的区别是我的来宾列表中的HTML非常不同——它使用不同的HTML元素，有不同的CSS类，并使用一个指令允许管理员在点击时编辑字段。

我的问题是-我是否有办法将这个过程的"添加新记录"部分提取到自己的部分或指令中，这样我就不需要每次重新编写我的"添加新客户"形式和逻辑?

我的第一个想法是创建一个元素指令: 
<new-guest></new-guest>

下面是指令代码:

angular.module('app.directives').directive('newGuest', ['Guest', '$stateParams', function(Guest, $stateParams){
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'directives/new-guest.html',
    bindToController: true,
    controllerAs: 'newGuestCtrl',
    controller: function() {
      var vm = this
      vm.newGuest = { "invitation_id": $stateParams.id };
      vm.addGuest = function(newGuest){
        Guest.create({guest: newGuest}, function(response) {
          //this is where I would push my new guest onto parent scope if I could
        });
        vm.newGuest = {};
      };
    }
  }
}]);

这个工作很棒re:添加记录到我的数据库，但我不知道如何将新记录推到指令之外的父范围- guestList.guests。我知道我可以通过创建一个新的指令来容纳我的客人列表，然后推到该指令的作用域，但我不确定这有多大意义，因为我的管理员和用户版本的客人列表使用完全不同的HTML。

1)将来宾列表作为双向绑定添加到指令中:

scope: {
    list: '='
}
指令定义中的

创建绑定和

<new-guest list="guestList.guests"></new-guest>
指令标签中的

将来宾名单提供给它。

2)将新客人推入您的回调，正如您正确建议的那样

scope.list.push(newGuest);

这应该确保宾客列表。宾客名单随时更新。

相关文章：