У меня есть проект, который я работаю над преобразованием более старой версии angular в angular release 6. В старом проекте у меня был собственный HTML-тег, который был добавлен в качестве директивы.HTML-тег:
<search-result-item item="item"></search-result-item>
Старый JS для этого:
'use strict';
(function() {
var searchResultItem = function($templateCache){
var controller = ['$scope', 'common.logModel', 'config', 'utilService', function($scope, Log, config, utilService){
var vm = this;
activate()
function activate(){
}
vm.getNumberOfWordsToShow = function (entry) {
if (typeof entry.numberOfWords === "undefined") {
return config.search.numberOfWordsShown;
}
else if (entry.numberOfWords === config.search.showAll) {
return config.search.showAllentry;
}
else {
return entry.numberOfWords;
}
}
vm.showMoreInfoLabel = function (entry) {
return (entry.details && entry.details !== null) ||
(entry.description.length > 0 && entry.description.length > config.search.numberOfWordsShown );
}
vm.showDetails = function (entry) {
entry.showDetails = !entry.showDetails;
entry.numberOfWords = entry.showDetails ? config.search.showAll : config.search.numberOfWordsShown;
}
vm.showMetadata = function (entry) {
utilService.openVoyagerLink(entry.pathToMetadata);
}
}];
return {
restrict: 'E',
replace: false,
scope: {
item: '='
},
controller: controller,
controllerAs: 'vm',
bindToController: true,
template: $templateCache.get('common/directives/searchresultitem/searchResultItem.tpl.html')
};
}
var commonModule = angular.module('commonModule');
commonModule.directive('searchResultItem', searchResultItem);
searchResultItem.$inject = ['$templateCache'];
}());
и старый HTML-код для этого:
<div class="row">
<div class="col-lg-9">
<div class="data-results-section">
<p class="search-result-url"><a ng-if="vm.item.path.substring(0,4) === 'http'" href="{{vm.item.path}}"
target="_blank">{{vm.item.path}}</a></p>
<div ng-if="vm.item.path.substring(0,4) !== 'http'">{{vm.item.path}}</div>
<p ng-show="vm.item.hasMetadata && vm.item.pathToMetadata.length > 0">
<a ng-click="vm.showMetadata(vm.item)" target="_blank">Metadata</a>
</p>
<p><span class="body-12-bold">Format: </span>{{vm.item.format}}</p>
<p><span class="body-12-bold">Indexed: </span>{{vm.item.indexed | date:'MM/dd/yyyy'}}</p>
<p><span class="body-12-bold">Relevance: </span>{{vm.item.score}}</p>
<p ng-show="vm.item.description.length > 0"><span>Description: </span>{{vm.item.description | htmlToPlaintext
| words : vm.getNumberOfWordsToShow(vm.item) }}
</p>
<div ng-show="vm.item.showDetails" ng-repeat="(key, val) in vm.item.details">
<p><span>{{key}}:</span>{{val}}</p>
</div>
<a class="search-result-view-more" href=""
ng-show="vm.showMoreInfoLabel(vm.item)"
ng-click="vm.showDetails(vm.item)">
<span ng-if="vm.item.showDetails">Hide</span>
<span ng-if="!vm.item.showDetails" class="links-14">View More Information</span> </a>
<!--links-14-->
</div>
<br>
</div>
<div class="col-lg-3">
<img class="search-result-img img-responsive"
ng-src="{{vm.item.thumbPath}}" fallback-img>
</div>
</div>
Любое направление напримеры того, что нужно сделать, потому что мне трудно найти информацию для примеров и документации для этого.