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指令 - 將屬性值鏈接到作用域屬性

回答

相關問題