angularjs - AngularJS 指令 - 使用具有不同值的相同指令

Question

我有以下指令：

app.directive("parishProCommunicant", function ($parse) {
    return {
        restrict: "E",
        templateUrl: 'templates/admin/parishprocommunicant.html',
        controller: function ($scope, $element, $compile) {
            $scope.labelNameCommunicant = "Name of Communicant";
            var modalParishProCommunicant = $('#modalParishProCommunicant');
            var dtParishProCommunicant = $('#datatable-pp-communicant');

            $scope.showModal = function () {
                // appendTo('body') prevents second modal to show in the first modal viewport
                modalParishProCommunicant.appendTo("body").modal('show');
            }

            $scope.closeModal = function () {
                modalParishProCommunicant.modal('hide');
            }

            /**
            * When the user selects a person
            **/
            $scope.selectCommunicant = function (id, names) {
                $scope.inputCommunicant = names;
                $scope.inputCommunicantId = id;
                $scope.closeModal();
            }

            initDatatable(dtParishProCommunicant, $compile, $scope);

            function initDatatable(dtUsers, $compile, $scope) {
                // code for initializing the datatable
            }
        },
        link: function (scope, elem, attrs, controller) {
            // alert(scope.ngModel);
        }
    }

});

...以及相应的模板templates/admin/parishprocommunicant.html

<!-- modal -->
<div class="modal fade" id="modalParishProCommunicant" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title">Select Person</h5>
                <button type="button" class="close" ng-click="closeModal()" aria-label="Close">
                    <i class="fa fa-close"></i>
                </button>
            </div>
            <div class="modal-body modal-lg">
                <table id="datatable-pp-communicant" class="table" style="width: 100%;">
                    <thead>
                    <tr>
                        <th>Names</th>
                        <th>Gender</th>
                        <th>Location</th>
                        <th>Phone Number</th>
                        <th>Ref Number</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="closeModal()">Close
                </button>
            </div>
        </div>
    </div>
</div>
<!--    End of Modal-->

...并按如下方式使用它：

<parish-pro-communicant class=""
                        ></parish-pro-communicant>

<parish-pro-communicant class=""
                        ></parish-pro-communicant>

<parish-pro-communicant class=""
                        ></parish-pro-communicant>

下面gif显示了它是如何工作的：

我的挑战是多次引用该指令，因为我需要实现以下目标：

1. 将标签名称从调用控制器传递给指令
2. 能够访问每个输入id的name所选人员（来自数据表）的和
3. 能够从调用控制器设置id和name

基本上，我应该能够以双向方式将数据从调用控制器传递到指令，反之亦然

标签： angularjsangularjs-directive