Generic component directive

Developer
Yahya Kacem
Size
1,975 Kb
Views
22,264
  1. Generic component directive Previews
  2. Generic component directive HTML Codes
  3. Generic component directive JS Codes

How do I make an generic component directive?

Just a generic directive for custom tags. What is a generic component directive? How do you make a generic component directive? This script and codes were developed by Yahya Kacem on 14 August 2022, Sunday.

Generic component directive Previews
IQ Test

Generic component directive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Generic component directive</title>
</head>
<body> <!doctype html>
<html ng-app="app">
<head>
</head>
<body ng-controller="MainCtrl"> <div ng-repeat="obj in objs"> <component obj="obj"></component> </div>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Generic component directive - Script Codes JS Codes

'use strict';
var controllers = {};
var directives = {};
directives.component = function($compile){ return { restrict: 'E', link: function (iScope, iElement, iAttrs) { if(iElement[0].getAttribute('type')){ console.log(iAttrs.type); iElement.attr(iAttrs.type, ''); iElement[0].removeAttribute('type'); $compile(iElement)(iScope); } } };
};
directives.editor = function(){ var linker = function(scope, element, attrs) {}; return { scope: { element: "=obj" }, replace: true, restrict: "EA", transclude: true, link: linker, template: '<div \ contenteditable="true"\ class="editor text-content"\ >\ {{element.content.text}}\ </div>' }
};
controllers.MainCtrl = function($scope) { $scope.objs = [ { "id": 1, "type": "editor", "content": { "text": "Some text here" } }, { "id": 2, "type": "image", "content": { "title": "title here", "alt": "alt value here", "url": "http://img.url/here.jpg" } } ];
};
var app = angular.module('app', []);
directives.component.$inject = ['$compile'];
controllers.MainCtrl.$inject = ['$scope'];
app.directive(directives);
app.controller(controllers);
Generic component directive - Script Codes
Generic component directive - Script Codes
Home Page Home
Developer Yahya Kacem
Username yahyaKacem
Uploaded August 14, 2022
Rating 3
Size 1,975 Kb
Views 22,264
Do you need developer help for Generic component directive?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yahya Kacem (yahyaKacem) Script Codes
Name
Menu hover text shadow
A Pen by Yahya Kacem
Ng2
Resizable element directive design
Draggable directive
AngularJS dynamically generated list with LED status
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!