将角度指令重构为组件答案

【问题标题】：Refactoring angular directives as components将角度指令重构为组件
【发布时间】：2016-10-01 02:18:55
【问题描述】：

我正在构建一个角度组件并跟随https://medium.com/@tweededbadger/tutorial-dynamic-data-driven-svg-map-with-angularjs-b112fdec421d#.d413i8wiy，因为它几乎完成了我想要做的事情。他们有以下指令：

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);
        }
    }
}]);

我正在构建的应用程序使用 angular 1.5.5、es6 和组件模型。这是我第一次使用“组件”驱动的角度并努力将“区域”指令转换为组件。我已成功将“svgMap”指令转换为组件，只是“区域”指令存在问题。

【问题讨论】：

您不能使 Angular 1.5 中的组件用作属性指令。所以不要。（在 Angular 2 中有这样的选项）在 svg 中还有一些与自定义元素有关的其他问题。
你不能这样做。组件不支持处理 DOM 的链接功能。此处讨论的内容可能会对您有所帮助：stackoverflow.com/questions/33709062/…

标签： javascript angularjs

【解决方案1】：

为了回答这个问题，首先我将给出 b/w 指令和组件的区别。

组件不是指令的替代品。它是指令手段的一个子集。当指令有以下两件事时，它将成为一个组件

它不应该有任何 DOM 操作（在指令链接函数中，如果需要，我们通常会进行 DOM 操作）
。它应该同时具有视图和逻辑（HTML 模板和控制器）。

由于你的 "region" 指令有一些 DOM 操作。它违反了组件的基本质量。所以它不能被转换

【讨论】：