两个不同的角度指令会出现相同的模板

same template coming up for two different angular directives

本文关键字:指令 两个      更新时间:2023-09-26

我有两个单独的角度指令要调用(见下面的标记),但最后一个模板始终是下面标记部分中为两个指令显示的模板

如您所见,我为两个指令设置了不同的 templateUrl(在下面的指令部分中),但标记部分(attachment-modal.html)中的最后一个始终是出现的那个。

如果我将下载模式.html最后一个,那么该模板将出现在两个指令中。这也可以通过在每个指令中放置断点来查看。您在标记中定义的第一个指令永远不会被执行,即使它被单击也是如此。

两个模板中都有不同的标记。如果我注释掉其中一个指令,那么与该指令关联的模板就会出现在两个指令中。

操作标记后,无论我做什么,无论后一个指令是什么,都是被执行的指令。

似乎我不能在同一网页上有两个指令,因为只会执行标记中定义的最后一个指令。

我在IE和Chrome中都尝试过。

我需要做什么才能为每个相应的指令提供关联的模板?

标记

<h3 class="panel-title">Check Deposit Header Information <download download-type="CK" download-id={{cdmCtrl.copiedRow.CheckDepositHeaderId}}>
</download> <attachment attachment-type="CK" attachment-id={{cdmCtrl.copiedRow.CheckDepositHeaderId}}>
</attachment> 
</h3>

模板

下载模板

<p>For Testing Purpose: Download Type: {{downloadCtrl.attributes.downloadType}}</p>
<p>For Testing Purpose: ID: {{downloadCtrl.attributes.downloadId}}</p>
    <div class="modal-header">
        <h3 class="modal-title">File Download</h3>
    </div>
    <div class="modal-footer">
        <div class="btn-toolbar pull-right" role="toolbar">
            <div class="btn-group" role="group" >
                <button type="button" class="btn btn-default" file-download download-type={{downloadCtrl.attributes.downloadType}} download-id={{downloadCtrl.attributes.downloadId}}>Download files</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-click="$close()">Close</button>
            </div>
        </div>
    </div>

上传模板

<p>For Testing Purpose: Attachment Type: {{attachCtrl.attributes.attachmentType}}</p>
<p>For Testing Purpose: ID: {{attachCtrl.attributes.attachmentId}}</p>
<div class="modal-header">
    <h3 class="modal-title">File Attachment</h3>
</div>
<div class="modal-body">
    <input type="file" id="inpFile" file-model="myFile" />
</div>
<div class="modal-footer">
    <div class="btn-toolbar pull-right" role="toolbar">
        <div class="btn-group" role="group" >
            <button type="button" class="btn btn-default" file-upload attachment-type={{attachCtrl.attributes.attachmentType}} attachment-id={{attachCtrl.attributes.attachmentId}}>Upload</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" ng-click="$close()">Close</button>
        </div>
    </div>
</div>

指令

.directive('attachment', ['$modal', function($modal) {
  return {
    restrict: 'E',
    transclude: false,
    replace: true,
    template: '<a style="padding-right: 5px" class="pull-right" href="#" ng-click="open()"><i class="fa fa-files-o fa-lg" style="padding-right: 5px"></i>Attachment</a>',
    link: function(scope, elem, attrs, controller) {
      scope.open = function() {
        $modal.open({
          templateUrl: root + 'AccountingModule/modal/attachment/attachment-modal.html',
          size: 'md',
          backdrop: true,
          controller: ['attributes', function(attributes) {
            var viewModel = this;
            viewModel.attributes = attributes;
          }],
          controllerAs: 'attachCtrl',
          resolve: {
            attributes: function() {
              return attrs;
            }
          }
        });
      }
    }
  }
}])
.directive('download', ['$modal', function($modal) {
  return {
    restrict: 'E',
    transclude: false,
    replace: true,
    template: '<a style="padding-right: 5px" class="pull-right" href="#" ng-click="open()"><i class="fa fa-files-o fa-lg" style="padding-right: 5px"></i>Download</a>',
    link: function(scope, elem, attrs, controller) {
      scope.open = function() {
        $modal.open({
          templateUrl: root + 'AccountingModule/modal/attachment/download-modal.html',
          size: 'md',
          backdrop: true,
          controller: ['attributes', function(attributes) {
            var viewModel = this;
            viewModel.attributes = attributes;
          }],
          controllerAs: 'downloadCtrl',
          resolve: {
            attributes: function() {
              return attrs;
            }
          }
        });
      }
    }
  }
}])

对于指令中的 ng-click 事件,我需要为每个打开的范围指定不同的名称。

例如,openattachments 和 opendownloads for scope.open functions ,因为 scope 是一个全局变量,最后一个总是覆盖第一个变量。

template: '<a style="padding-right: 5px" class="pull-right" href="#" ng-click="openattachments()"><i class="fa fa-files-o fa-lg" style="padding-right: 5px"></i>Attachment</a>',