Hello Experts
I have already created a directive using template in angularjs. now are going to upgrade in angular 14. so please help me how to create the directive using template as below angular js Code
myapp.directive("helper", function () {
return {
restrict: 'EA',
scope: {
Items: "=list",
SelectedRow: "=row",
columnDefs: "=columns",
sortBy: "@filter",
SelectedValue: "@selectedvalue",
datasource: "=datasource",
ngModel: "=",
hclick: "&"
},
controller: ['$scope', '$filter', function ($scope, $filter) {
$scope.reverse = false;
$scope.curPage = 1;
$scope.itemsPerPage = 25;
// $scope.maxSize = 30;
// $scope.filteredItems=$scope.Items;
// $scope.numOfPages = function () {
// return Math.ceil($scope.filteredItems.length / $scope.itemsPerPage);
// };
// $scope.$watch('curPage + numPerPage', function () {
// var begin = (($scope.curPage - 1) * $scope.itemsPerPage),
// end = begin + $scope.itemsPerPage;
// $scope.pageItems = $scope.filteredItems.slice(begin, end);
// });
// $scope.searchfilter=function(){
// $scope.filteredItems=filterFilter($scope.Items,$scope.searchtext , true);
// }
// // $scope.failedSubjects = $filter('filter')($scope.Items, {'grade':'C'}, true);
$scope.field = function (item, value) {
if (value) {
var l = value.split(".");
var itm = Object.assign({}, item);
var c = 0;
// for (var x of l) {
//
// if (itm[x])
// itm = itm[x];
// else
// return ' '
//
// c += 1;
// if (c === l.length)
// return itm;
//
// }
// angular.forEach(l, function (x) {
// if (itm[x])
// itm = itm[x];
// else
// return ' '
// c += 1;
// if (c === l.length)
// return itm;
// });
for (var i = 0; i <= l.length; i++) {
var v = l[i];
if (itm[l[i]])
itm = itm[l[i]];
else
return ' '
if (i + 1 === l.length)
return itm;
}
}
}
}],
template: function (element, attrs) {
var htmltext = "\<div id=\"" + attrs.helperid + "\" class=\"helpnav\">" +
"<div class=\"bg-primary p-1\" style=\"display: flex;justify-content:space-between;line-height:0px;\"><input style=\"padding:0px !important;line-height:0px;\" type=\"text\" ng-model=\"searchtext\" placeholder=\"Search\"/>" +
"<a href=\"javascript:void(0)\" class=\"closebtn\" ng-click=\"closeNav()\">×</a> </div>" +
"<table class=\"table table-hover table-bordered mb-0 hidden-sm-down\" cellspacing=\"0\" style=\"color:black;z-index:1;\">" +
"<thead class=\"thead-light\">" +
"<tr class=\"bg-primary\">" +
"<th ng-repeat=\"header in columnDefs\" ng-style=\"header.style\" class=\"text-center\">{{header.displayName}}</th>" +
"</tr>" +
"</thead>" +
"<tbody style=\"width:100%;height: calc(100vh - 232px);overflow-y:scroll;overflow-x:scroll;display:block;\">" +
"<tr dir-paginate=\"item in Items| orderBy:sortBy|filter: searchtext| itemsPerPage: 50\" ng-click=\"closeNav(item)\">" +
"<td style=\"max-width: 100px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\" ng-repeat=\"row in columnDefs\" ng-style=\"row.style\">{{field(item,row.field)}}</td></tr>" +
"</tbody></table>" +
"<dir-pagination-controls max-size=\"5\" direction-links=\"true\" boundary-links=\"true\"></dir-pagination-controls></div>" +
"<span style=\"font-size:10px;cursor:pointer ;padding:10px\" ng-click=\"openNav()\">☰</span>"
return htmltext;
},
link: function (scope, element, attrs, ngModel) {
scope.width = attrs.width;
scope.helperid = attrs.helperid;
scope.openNav = function () {
try {
scope.hclick().then(function () {
document.getElementById(scope.helperid).style.width = scope.width;
scope.searchtext = "";
})
}
catch (ex) {
document.getElementById(scope.helperid).style.width = scope.width;
scope.searchtext = "";
}
}
scope.closeNav = function (item) {
document.getElementById(scope.helperid).style.width = "0";
if (item) {
scope.SelectedRow = item;
scope.datasource = item[scope.SelectedValue];
// ngModel.$setViewValue(item[scope.SelectedValue]);
// ngModel.$commitViewValue();
}
}
}
};
});