如何使用其他自定义指令中的元素标记作为另一个自定义指令的模板
How can I use the element tags from other custom directive as the template for another custom directive
我对angularjs比较陌生。我正在客户端使用angularjs创建一个web应用程序。我制作了几个自定义指令,希望客户端能够自定义每次登录时看到的指令。我试图创建一个字符串,其中填充用户选择的自定义指令标记。该信息将作为cookie值保存,并在用户登录时由控制器加载
这是传递的cookie值(我现在已经硬编码了):
public usersCustoms = `<div class="mdl-grid">
<div id="firstrow" class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-grid" >
<cit-recap > </cit-recap>
<veh-ar-recap></veh-ar-recap>
<new-models-inv></new-models-inv>
<used-models-inv></used-models-inv>
</div>
<div id="secondrow" class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-grid">
<deal-recap></deal-recap>
<vehicle-inv></vehicle-inv>
<acct-trend></acct-trend>
</div>
<div id="thirdrow" class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-grid">
<parts-inv></parts-inv>
</div>
</div>`;
以下是指令——最后一个指令"usersCustomDirective"是应该拉入其他指令的指令。
namespace DashboardDemo {
function citRecap(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/citrecap.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('citRecap', citRecap);
function vehArRecap(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/vehArRecap.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('vehArRecap', vehArRecap);
function newModelsInv(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/newModelsInv.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('newModelsInv', newModelsInv);
function usedModelsInv(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/usedModelsInv.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('usedModelsInv', usedModelsInv);
function dealRecap(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/dealRecap.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('dealRecap', dealRecap);
function vehicleInv(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/vehicleInv.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('vehicleInv', vehicleInv);
function acctTrend(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/acctngTrend.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('acctTrend', acctTrend);
function partsInv(): ng.IDirective {
return {
templateUrl: 'ngDashboardDemo/Views/Directives/partsinv.html',
restrict: 'AE',
replace: true,
controller: DashboardDemo.DashboardController,
controllerAs: 'dc',
link: function (scope, elem, attrs) {
}
}
}
angular.module('DashboardDemo').directive('partsInv', partsInv);
function usersCustomDirective(): ng.IDirective {
return {
link: function (scope, elem, attrs) {
//elem.html(scope.dc.usersCustoms);
//console.log(scope.dc.usersCustoms);
elem.html(scope.userOptions);
},
restrict: 'AEC',
replace: true,
transclude: true,
controller: DashboardController,
controllerAs: 'dc',
scope: {
userOptions: '@userOptions'
},
//template: scope.userOptions
}
}
angular.module('DashboardDemo').directive('usersCustomDirective', usersCustomDirective);
}
这是我的HTML视图:
<main class="mdl-color--grey-100">
<users-custom-directive user-options ="{{dc.usersCustoms}}"></users-custom-directive></main>
正如现在所写的,我假设html不会显示,因为html无法识别我的自定义标记。我也尝试过在链接函数中使用elem.replaceAll,但得到了类似的结果。当我在chrome中打开开发人员工具时,在元素下,我会看到我的div和div中的自定义标记,但是,只有div被渲染,自定义标记没有。控制台已经记录了传入的字符串值。我还尝试将"usersCustomDirective"更改为:
function usersCustomDirective(): ng.IDirective {
return {
link: function (scope, elem, attrs) {
//elem.html(scope.dc.usersCustoms);
//console.log(scope.dc.usersCustoms);
console.log(scope.userOptions);
},
restrict: 'AEC',
replace: true,
transclude: true,
controller: DashboardController,
controllerAs: 'dc',
scope: {
userOptions: '@userOptions'
},
template: scope.userOptions
}
}
它并没有在html中显示任何内容,而是显示了我正在传递的文本字符串。
好的,我想好了我需要做什么。经过进一步的研究,我需要在这个过程中包含$compile。我所做的更改是在指令函数调用中添加$compile。然后,我为模板分配了scope.userOptions值。我在模板上调用了$compile和viola angularjs魔术。现在效果很好。希望这能帮助其他人。仅供参考,如果你像我一样使用typescript,并且你收到一个错误:"类型IScope上不存在属性空白",你需要创建一个自己的接口,并扩展IScope以包括属性
function usersCustomDirective($compile): ng.IDirective {
return {
link: function (scope: IMyScope, elem, attrs) {
var template = scope.userOptions;
var linkFn = $compile(template);
var content = linkFn(scope);
elem.append(content);
},
restrict: 'AEC',
replace: true,
controller: DashboardController,
controllerAs: 'dc',
scope: {
userOptions: '@userOptions'
},
}
}
angular.module('DashboardDemo').directive('usersCustomDirective', usersCustomDirective);
相关文章:
- 如何在自定义指令中获取计算的属性
- 向动态生成的DOM添加Angular自定义指令
- 自定义指令中的AngularJS ng模型
- 如何在html中以角度显示自定义指令的作用域
- 自定义指令模板中的AngularJS控制变量
- AngularJS通过自定义指令传递点击的项目
- 如何在angularjs中将多个作用域变量传递到自定义指令中
- 处理角度自定义指令中的onReady事件
- 为什么ng中的自定义指令在循环完成后重复运行
- 对于使用传递的数据计算的局部范围变量,角度绑定在自定义指令中不起作用
- Angular.JS自定义指令;不起作用
- 如何通过Angular中的$resource发送来自自定义指令的输入值
- AngularJS:如何访问自定义指令中的input[date]min属性
- AngularJS:ngRepeat作用域在具有隔离作用域和ngTransclude的自定义指令中失败
- 如何使用其他自定义指令中的元素标记作为另一个自定义指令的模板
- 如何限制自定义指令的可能属性值
- 动态网格作为自定义指令
- AngularJS - 在自定义指令中继承ngModel
- 调用另一个自定义指令的角度自定义指令
- 在 AngularJs 中验证自定义指令(我想让它成为必需的)