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

问题描述

我有以下指令：

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,$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 显示了它是如何工作的：

man

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

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）