gpt4 book ai didi

javascript - 将 Angular Directive(指令)重构为组件

转载 作者:行者123 更新时间:2023-11-30 11:57:19 31 4
gpt4 key购买 nike

我正在构建一个 Angular 组件并跟随 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 和组件模型。这是我第一次使用“组件”驱动 Angular 并努力将“区域”指令转换为组件。我已成功将“svgMap”指令转换为组件,只是“region”指令有问题。

最佳答案

为了回答这个问题,首先我会给出黑白指令和组件的区别。

组件不能替代指令。它是指令手段的一个子集。当指令有以下两个东西时,它将成为一个组件

  1. 它不应该有任何 DOM 操作(在指令链接函数中,如果需要,我们通常会进行 DOM 操作)
  2. .它应该同时具有 View 和逻辑(HTML 模板和 Controller )。

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

关于javascript - 将 Angular Directive(指令)重构为组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37573319/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com