Question

我有两个单独的角度指令我打电话（见下面的标记），但最后一个模板总是下面标记部分中两个指令出现的那个。

正如您所看到的，我对两个指令（在下面的指令部分中）设置了不同的 templateUrl ，但是标记部分中的最后一个（附件 - modal.html）始终是出现的那个。

如果我将download-modal.html作为最后一个，则该模板将出现在两个指令中。通过在每个指令中放置断点也可以看到这一点。您在标记中定义的第一个指令，即使被单击也不会执行。

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

操作标记后，无论我做了什么，后者都是指令，是执行的指令。

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

我在IE＆amp;铬。

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

标记

<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;
            }
          }
        });
      }
    }
  }
}])

Answer 1

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

例如，openattachments＆amp; scope.open函数的opendownloads，因为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>',

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

标记

模板

下载模板

上传模板

指令

1 个答案: