AngularJS指令 - 将属性值链接到作用域属性

我在我的应用程序中使用angular-nvd3作图。我创建了一个自定义指令来传递指令中的选项，而不是在控制器中设置它们。AngularJS指令 - 将属性值链接到作用域属性

查看：

<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属性被设置在控制器和图表工作正常。不过，我想重新使用该指令来绑定到控制器中的不同数据属性。

就是这样。本质上的自定义指令的数据属性链接到模板中的指令内

//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>

感谢

来源

2016-08-11 ganeshran

我最终解决这一使用指定属性直接在自定义指令上

当angular用模板标记替换指示标记时，它将所有属性添加到替换的html行。

来源

2016-08-15 09:19:44 ganeshran

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

来源

2016-08-11 10:34:18 Laurianti

感谢您的回答，当我尝试它，它给了我错误=多个指令[nvd3BarChart（module：app.graphs），nvd3]要求新/隔离范围 – ganeshran

但是，如果我将标记设置为，不需要在模板中设置数据属性，它可以很好地工作。但是，创下了新的范围和更换基于参数不起作用 – ganeshran

我编辑我的答案 – Laurianti

AngularJS指令 - 将属性值链接到作用域属性

回答

相关问题