两个不同的角度指令会出现相同的模板
same template coming up for two different angular directives
我有两个单独的角度指令要调用(见下面的标记),但最后一个模板始终是下面标记部分中为两个指令显示的模板。
如您所见,我为两个指令设置了不同的 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>',
相关文章:
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- 比较 AngularJS 指令中的两个整数
- angularjs在一个元素上有两个指令
- 角度调用父函数,其参数来自两个级别深的指令
- 两个指令引用一个变量,但第二个指令不引用;不要急于改变
- 比较 angularjs 指令中的两个字段
- 两个不同的角度指令会出现相同的模板
- 使用指令在 1000 条记录上的两个表之间进行角度拖放
- 具有两个模板容器的指令
- 在 Angular 中,在两个不同的指令之间传达匹配的$index
- 具有相同选项的角度两个(restrict:'A')指令
- 用两个指令解除禁令
- 一个指令的两个实例正在使用同一个模板实例
- angular.js两个指令,第二个指令不执行
- 为两个视图创建指令
- AngularJs-将一个ng模型绑定到具有两个输入的指令
- Angular中两个不同的指令在同一个控制器上共享作用域
- AngularJS指令的两个实例,更改为2会影响第一个实例
- 如何在指令中定义两个ng-click函数