1
私は比較的新しいです。私はクライアント側でangularjsを使用してWebアプリケーションを作成しています。いくつかのカスタムディレクティブを作成し、クライアントがログインするたびにどのディレクティブを表示するかをカスタマイズできるようにしたいと考えています。ユーザーが選択するカスタムディレクティブタグが設定された文字列を作成しようとしました。この情報は、クッキー値として保持し、ときにユーザーがログインするコントローラによってロードされます他のカスタムディレクティブの要素タグを別のカスタムディレクティブのテンプレートとして使用するには
これは渡さクッキーの値（私は今それをハードコーディングされました）です：。
ここ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は表示されません。私のカスタムタグを認識できないためです。私もリンク関数でelem.replaceAllを使ってみましたが、同様の結果が得られました。クロムでデベロッパーツールを開くと、div内のdivとカスタムタグが表示されますが、divのみが表示されます。カスタムタグは表示されません。 Thheコンソールは、渡された文字列の値を記録した私もこれに「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で何も示さないで、それは私が渡しているテキストの文字列を表示します以上。