我对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,在中提琴上使用了angularjs魔术。现在效果很好。希望这可以帮助其他人。仅供参考,如果您像我一样正在使用打字稿,并且会收到一条错误消息:“ 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);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句