Javascript 将角度指令重构为组件

我正在构建一个角度组件，并跟随它，因为它几乎完成了我要做的事情。他们有以下指示：

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和组件模型。这是我第一次使用“component”驱动的angular并努力将“region”指令转换为组件。我已成功地将“svgMap”指令转换为组件，只是“region”指令有问题。

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

组件不是指令的替代品。它是指令的一个子集。 当指令包含以下两个内容时，它将成为一个组件

它不应该有任何DOM操作（在指令链接函数中，如果需要，我们通常会有DOM操作）

。它应该同时具有视图和逻辑（HTML模板和控制器）

---

由于您的“region”指令具有一些DOM操作。它违反了组件的基本质量。因此它无法转换

您不能使angular 1.5中的组件用作属性指令。所以不要这样做。（angular 2中有这样的选项）在svg中，自定义元素还存在一些附加问题。您不能这样做。组件不支持用于处理DOM的链接函数。此处讨论的内容可能会帮助您了解更多信息：