Question

我在我的应用程序中使用angular-nvd3进行制图。我创建了一个自定义指令来传递指令中的选项，而不是在控制器中设置它们。

查看：

<nvd3-bar-chart></nvd3-bar-chart>

指令

angular.module('app.graphs')
    .directive('nvd3BarChart',
        function() {
            return {
                restrict: 'E',
                replace: true,
                template: '<nvd3 options="nvd3_options" data="bar_data" api="api"></nvd3>',
                link: function(scope) {
                    scope.nvd3_options = {
                        chart: {
                            type: 'discreteBarChart',....

bar_data属性在控制器中设置，图表工作正常。但是，我想重用该指令绑定到控制器中的不同数据属性。

像这样的东西。基本上将自定义指令的data属性链接到指令

中的模板

//Temperature data would be set in controller
<nvd3-bar-chart data="temperature_data"></nvd3-bar-chart>

//Precipitation data would be set in controller
<nvd3-bar-chart data="precipitation_data"></nvd3-bar-chart>

由于

Answer 1

scope: {
 dataParam: '@'
},
template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>',

没有隔离范围：

template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>',
link: function (scope, element, attr) {
    scope.dataParam = attr.dataParam;
}

Answer 2

我最后通过直接在自定义指令

上指定属性来解决这个问题

当angular用模板标记替换指令标记时，它会将任何属性添加到替换的html行。

AngularJS指令 - 将属性值链接到范围属性

2 个答案: