如何在AngularJS中以编程方式计算HTML元素(指令)的属性名

How to programmatically compute the attribute names of HTML elements (directives) in AngularJS?

本文关键字：指令 元素 属性 HTML 计算 AngularJS 方式 编程      更新时间：2023-09-26

我在AngularJS中定义了这些属性限制指令:

<div data-pie-chart data="..."></div>
<div data-line-chart data="..."></div>
<div data-column-chart data="..."></div>

呈现页面时，我以JSON格式从服务器加载图表列表，例如:

[ { chartType: "pie", data: [ 1, 1, 1, 1, 1 ] },
  { chartType: "pie", data: [ 2, 2, 2, 2, 2 ] },
  { chartType: "pie", data: [ 3, 3, 3, 3, 3 ] },
  { chartType: "column", data: [ 4, 4, 4, 4, 4 ] },
  { chartType: "column", data: [ 5, 5, 5, 5, 5 ] } ]
我想使用ng-repeat(或类似)来生成以下代码: 
<div data-pie-chart data="[1,1,1,1,1]"></div>
<div data-pie-chart data="[2,2,2,2,2]"></div>
<div data-pie-chart data="[3,3,3,3,3]"></div>
<div data-column-chart data="[4,4,4,4,4]"></div>
<div data-column-chart data="[5,5,5,5,5]"></div>

我希望有一个优雅的"angularish"代码，能够做到这一点，理想情况下不需要利用"ng-switch"或"ng-if"，因为图表列表不受限制，一开始不知道(新类型的图表可以随时添加)。

我可以计算出属性的名称吗?这样我就不用硬编码了?

我使用外部指令和内部模板做了类似的事情。一旦类型已知，外部指令负责编译内部图表指令。

包装指令 

.directive( 'chartWrapper', [ '$compile', function($compile){
    return {
        scope: { data: '=', type: '=' },
        link: function($scope, elem, attrs){
            var dom = '<div ' + $scope.type + ' data="' + $scope.data + '"/>'
            var el = angular.element(dom)
            $compile(el)($scope)
            elem.append(el)
        }
    }
}])

我还没有测试过这个，因为它和我自己的情况有点不同，但应该让你开始。

相关文章：