0
私はカスタムディレクティブを作成しました。リンク機能が呼び出されない
私の問題は、htmlテンプレートがレンダリングされないということです。
デバッグ後、インスタンス関数が呼び出されないため、リンク関数が呼び出されないことがわかりました。
「デバッガ」を追加しました。
"デバッガ;" //最初の発言は呼び出されます。私は、jsファイルに遅延ロードがロードされることを知っています。
これは私のディレクティブです：
module kz.controls.products.details {
'use strict';
debugger;//First
import IDropDown = kz.controls.common.IDropDown;
import FilterItemModel = WebApi.Core.Models.Common.FilterItemModel;
import NewEggTabModel = WebApi.Core.Models.Products.Details.NewEggTabModel;
import NewEggListingSettingsModel = Kyozou.Model.Auctions.NewEgg.NewEggListingSettings;
class TabController {
public $scope: ng.IScope;
public details: INewEggDetailsTab;
public errorsNotifyService: kz.blocks.IErrorsNotifyService;
public dropdownsDataService: kz.services.IDropdownsDataService;
public newEggListingSettingsService: kz.services.INewEggListingSettingsService;
public config: kz.settings.IApiEndpointConfig;
private formName: string;
private conditionNoteIsVisible: boolean;
private multiselectSettings = {
dynamicTitle: false,
showCheckAll: false,
showUncheckAll: false,
scrollableHeight: '200px',
scrollable: true,
};
private eventsFeedback = {
onItemSelect:() => {
},
onItemDeselect:() => {
}
};
private specificsPath: string[];
static $inject = [ "$modal", "$route"];
constructor(
private $modal,
private $route: ng.route.IRouteService
) { }
onDataLoaded() {
this.specificsPath = [this.config.getTypescriptPath('ts/controls/common/amazon-specifics.directive.js')];
this.$scope.$watch(() => {
return this.details.isDirty;
}, (newValue: boolean) => {
if (newValue) {
this.$scope['newEggTabForm'].$setDirty();
} else {
this.$scope['newEggTabForm'].$setPristine();
}
});
this.$scope.$watch(() => {
return this.$scope['newEggTabForm'] ? this.$scope['newEggTabForm']['$dirty'] : false;
}, (newValue: boolean, oldValue: boolean) => {
this.details.isDirty = newValue;
});
}
loadProductSettings(templateId: number, amazonSettingsID?: number): void {
}
setAmazonProductType(value: FilterItemModel) {
}
setAmazonProductConditionType(value: FilterItemModel) {
}
setStrategyType(value: FilterItemModel) {
}
setShipsDomestically(value: FilterItemModel) {
}
setFulfillmentChannel(value: FilterItemModel) {
}
setFulfillment(value: FilterItemModel) {
}
getKeysFromStringList(stringList: string[], dictionary: { [id: number]: { id; label; }; }): { id; }[] {
stringList = stringList || [];
var items: { id; }[] = [];
for (var key in dictionary) {
for (var i = 0; i < stringList.length; i++) {
if (dictionary[key].label === stringList[i]) {
items.push({ id: key });
continue;
}
}
}
return items;
}
getStringListFromKeys(keys: { id; }[], dictionary: { [id: number]: { id; label; }; }): string[] {
var items: string[] = [];
for (var i = 0; i < keys.length; i++) {
items.push(dictionary[keys[i].id].label);
}
return items;
}
updateAmazonSettings() {
this.details.isValid = this.$scope['newEggTabForm']['$valid'];
if (this.details.isDirty === false) {
this.errorsNotifyService.error('No changes!');
return;
}
angular.forEach(this.$scope['newEggTabForm'].$error.required, (field) => {
field.$setDirty();
});
this.$scope['newEggTabForm'].$setDirty();
if (this.details.isValid) {
}
}
searchCatalog(): void {
// this.details.searchCatalog(SearchCatalogTabEnum.Amazon, this.details.amazonListingSettingsModel.sellerId);
}
openLinkModal(): void {
//this.amazonCategoryService.getAmazonCategoryLink(this.details.amazonListingSettingsModel.templateId)
// .then(result => {
// this.amazonCategoryLink = result;
// this.modalInstance = this.$modal.open({
// templateUrl: this.config.getTemplatePath('ts/controls/common/amazon-category-link.modal.tpl.html'),
// scope: this.$scope,
// backdropClass: 'backdrop-fixed'
// })
// })
}
cancelModal(): void {
}
disable() {
}
enable() {
}
}
class Directive implements ng.IDirective {
restrict = 'EA';
controller = TabController;
controllerAs = 'vm';
replace = true;
templateUrl: string;
scope = {
details: '=',
};
constructor(errorsNotifyService, dropdownsDataService, newEggListingSettingsService, config: kz.settings.IApiEndpointConfig) {
debugger;
TabController.prototype.errorsNotifyService = errorsNotifyService;
TabController.prototype.dropdownsDataService = dropdownsDataService;
TabController.prototype.newEggListingSettingsService = newEggListingSettingsService;
TabController.prototype.config = config;
this.templateUrl = config.getTemplatePath('ts/controls/products/details/newEgg-tab.tpl.html');
}
link(scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes,controller: TabController): void {
debugger;
controller.$scope = scope;
controller.details = scope['details'];
controller.onDataLoaded();
}
}
export interface INewEggDetailsTab extends kz.modules.products.details.IBaseTab {
productDetailsModel: WebApi.Core.Models.Products.ProductDetailsModel;
newEggListingSettingsModel: Kyozou.Model.Auctions.NewEgg.NewEggListingSettings;
newEggProductTypes: Array<FilterItemModel>;
newEggProductConditionTypes: Array<FilterItemModel>;
priceAdjustStrategyTypes: Array<FilterItemModel>;
newEggCategories: Array<FilterItemModel>;
newEggTabModel: NewEggTabModel;
enabled: boolean;
searchCatalog: (tab: SearchCatalogTabEnum, newEggSellerId: number) => void;
inTabView: boolean;
}
instance.$inject = [
kz.Constants.Services.ErrorsNotifyService,
kz.Constants.Services.DropdownsDataService,
kz.Constants.Services.NewEggListingSettingsService,
kz.Constants.Services.ApiEndPoint
];
function instance(errorsNotifyService, dropdownsDataService, newEggListingSettingsService, config): ng.IDirective {
debugger;
return new Directive(errorsNotifyService, dropdownsDataService, newEggListingSettingsService, config);
}
angular
.module(kz.Constants.Modules.ProductsDetailsControlls)
.directive(kz.Constants.Directives.NewEggTab, instance);
}
は、これが私のテンプレートディレクティブです：
<form name="newEggTabForm" class="form-details">
<div block-ui="main">
<div loading-indicator>
<section class="form-horizontal form-details-section">
<header class="form-details-header">
<h4 class="title-sm">newegg</h4>
</header>
<div class="form-details-body">
<label class="spaced-right-inside-lg">
Enable or disable the newegg functionality for this product:
</label>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Disabled</button>
<button type="button" class="btn btn-primary active">Enabled</button>
</div>
</div>
</section>
<section class="form-horizontal form-details-section">
<header class="form-details-header">
<h4 class="title-sm">newegg Marketplace Options</h4>
</header>
<div class="form-details-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 col-md-4 control-label">newegg account:</label>
<div class="col-sm-9 col-md-8">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="">NewEggTestSeller</a></li>
<li><a href="">NewEggTestSeller2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-md-2 control-label">Industry and subcategory:</label>
<div class="col-sm-9 col-md-10">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="">Accessories (1)</a></li>
<li><a href="">Apparel (62)</a></li>
</ul>
</div>
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="">Air Conditioners</a></li>
<li><a href="">Air purifier</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputListingPrice" class="col-sm-3 col-md-4 control-label">newegg listing price:</label>
<div class="col-sm-9 col-md-8">
<input type="text" class="form-control input-number" id="inputListingPrice" name="inputListingPrice">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputSellerPart" class="col-sm-3 col-md-4 control-label">Seller part #:</label>
<div class="col-sm-9 col-md-8">
<input type="text" class="form-control" id="inputSellerPart" name="inputSellerPart">
</div>
</div>
<div class="form-group">
<label for="inputRelatedSellerPart" class="col-sm-3 col-md-4 control-label">Related seller part #:</label>
<div class="col-sm-9 col-md-8">
<input type="text" class="form-control" id="inputRelatedSellerPart" name="inputRelatedSellerPart">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="customInput" class="col-sm-3 col-md-4 control-label">Condition:</label>
<div class="col-sm-9 col-md-8">
<label class="radio-inline">
<input type="radio" name="conditionRadios" checked=""> New
</label>
<label class="radio-inline">
<input type="radio" name="conditionRadios"> Refurbished
</label>
</div>
</div>
<div class="form-group">
<label for="customInput" class="col-sm-3 col-md-4 control-label">Item package:</label>
<div class="col-sm-9 col-md-8">
<label class="radio-inline">
<input type="radio" name="packageRadios" checked=""> Retail
</label>
<label class="radio-inline">
<input type="radio" name="packageRadios"> OEM
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="col-sm-offset-3 col-md-offset-4 col-sm-9 col-md-8">
<div class="checkbox">
<label>
<input type="checkbox"> Override product description
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 col-md-2 control-label">
<label for="inputConditionNote">Product description:</label>
<div><i class="fa fa-arrows-h icon-success"></i> <span class="side-details text-sm text-details">max 4000 chars</span></div>
</div>
<div class="col-sm-9 col-md-10">
<textarea class="form-control" id="inputConditionNote" name="inputConditionNote" rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customInput" class="col-sm-3 col-md-4 control-label">Shipping:</label>
<div class="col-sm-9 col-md-8">
<label class="radio-inline">
<input type="radio" name="shippingRadios" checked=""> Default
</label>
<label class="radio-inline">
<input type="radio" name="shippingRadios"> Free
</label>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="form-horizontal form-details-section">
<header class="form-details-header">
<h4 class="title-sm">Hazards and restrictions</h4>
</header>
<div class="form-details-body">
<div class="form-group">
<label class="col-sm-3 col-md-2 control-label">Hazards and restrictions:</label>
<div class="col-sm-9 col-md-10">
<div class="form-group">
<label class="col-sm-3 col-md-4 control-label">Shipping hazardous materials:</label>
<div class="col-sm-9 col-md-8">
<label class="radio-inline">
<input type="radio" name="materialsRadios" checked=""> Yes
</label>
<label class="radio-inline">
<input type="radio" name="materialsRadios"> No
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-md-4 control-label">Age 18+ verification:</label>
<div class="col-sm-9 col-md-8">
<label class="radio-inline">
<input type="radio" name="ageRadios" checked=""> Yes
</label>
<label class="radio-inline">
<input type="radio" name="ageRadios"> No
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-md-4 control-label">Choking hazard:</label>
<div class="col-sm-9 col-md-8">
<div class="checkbox">
<label>
<input type="checkbox"> Item contains small parts.
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Item is a small ball.
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Item contains a small ball.
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Item contains balloons.
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Item is a marble.
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Hazards and restrictions
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-md-4 control-label">California proposition 65:</label>
<div class="col-sm-9 col-md-8">
<div class="radio">
<label>
<input type="radio" name="propositionRadios" checked=""> None
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="propositionRadios"> Item is a motherboard and contains chemicals know to the state California to cause cancer and reproductive toxicity.
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="propositionRadios"> Item is NOT a motherboard and contains chemicals know to the state California to cause cancer or reproductive toxicity.
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="text-center">
<div loading-indicator-btn>
<button type="button" class="btn btn-secondary btn-wide text-semistrong"><span>Save</span></button>
</div>
</footer>
</div>
私はディレクティブを使用ところ、これは次のとおりです。あなたには
<div class="tab-content" ng-repeat="tab in vm.tabsVisibility.newEggTabs" ng-if="vm.selectedTab == 'newegg-'+tab.newEggSellerId">
<div oc-lazy-load="vm.lazyLoadParams">
<div data-kz-newegg-tab data-details="vm.newEggDetailsTabs['newegg-'+tab.newEggSellerId]"></div>
</div>
</div>
あなたの答えをありがとう。 ディレクティブ定義関数とはどういう意味ですか？ – Roysh