Refactoring angular directives as components

Question

I am building an angular component and following along with https://medium.com/@tweededbadger/tutorial-dynamic-data-driven-svg-map-with-angularjs-b112fdec421d#.d413i8wiy since it is accomplishing pretty much what I'm trying to do. They have the following directives :

angular.module('SvgMapApp').directive('svgMap', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        templateUrl: 'img/Blank_US_Map.svg',
        link: function (scope, element, attrs) {
            var regions = element[0].querySelectorAll('.state');
            angular.forEach(regions, function (path, key) {
                var regionElement = angular.element(path);
                regionElement.attr("region", "");
                $compile(regionElement)(scope);
            })
        }
    }
}]);

angular.module('SvgMapApp').directive('region', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attrs) {
            scope.elementId = element.attr("id");
            scope.regionClick = function () {
                alert(scope.elementId);
            };
            element.attr("ng-click", "regionClick()");
            element.removeAttr("region");
            $compile(element)(scope);
        }
    }
}]);

The application I am building is using angular 1.5.5, es6 and the component model. This is the first time I have used "component" driven angular and struggling to convert the 'region' directive to a component. I have successfully converted the 'svgMap' directive to a component, just having issues with the 'region' directive.

You can not make component in angular 1.5 to work as attribute directive. So just do not. (In angular 2 there is such option) In svg there also some additional issues with custom elements. — Petr Averyanov
– Petr Averyanov, Commented Jun 1, 2016 at 17:01
You couldn't do this. component does not support link function for handling DOM. Something talked here may help you more info: stackoverflow.com/questions/33709062/… — Vu Quyet
– Vu Quyet, Commented Jun 2, 2016 at 2:02

Rathma · Accepted Answer · 2017-06-11 10:45:42Z

3

For answer the question, First I will give the difference b/w Directive & Components.

Components is not the replacement for directives. It's a subset of directives means. When the directive has following two things it will become a component

It shouldn't have any DOM manipulation(In directive link function usually we will have our DOM manipulation if needed)
.it should have both view & logic(HTML template & Controller).

As your "region" directive having some DOM manipulation.it violating the basic quality of components.So it can't be converted

edited Jun 11, 2017 at 10:45

Rathma

1,3212 gold badges34 silver badges68 bronze badges

answered Aug 19, 2016 at 19:35

BALA

1881 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Refactoring angular directives as components

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related