Question

我有以下需要：

a）我有一个名为EventsGraph.html的模板。它有3个标签：A / B / C. b）我有一个名为EventsGraphCtrl.js的控制器

EventsGraph.js的工作是填充图表对象（使用谷歌图表）。控制器基本上对特定URL执行http.get并呈现条形图。

返回html：所有3个标签生成图表。不同之处在于A，B和C需要调用不同的URL。控制器的所有其他代码元素都是相同的

回到我的需要： a）我不希望每个标签有独特的控制器 - 我知道如何通过状态来做 - 这将是代码重复

b）我希望一个图表生成功能在每个具有不同URL的选项卡中运行

我想过使用routeParams，但由于模板文件只调用一次我的控制器，因此无法工作 - 因为我切换标签时不会调用它

我尝试将图形转换为控制器的子功能并在模板中调用{{generategraph（url）}}但由于范围数据更改而一次又一次地循环显示摘要问题

实现我需要的最佳方式是什么？

Answer 1

您可以将ajax调用移至每个标签的ng-click。将选项卡ID传递给函数，并使用switch语句解析它：

<tab-button ng-click="getGraphData("A")"></tab-button>
<tab-button ng-click="getGraphData("B")"></tab-button>
<tab-button ng-click="getGraphData("C")"></tab-button>

在您的控制器中：

$scope.data = {};    
$scope.getGraphData = function (tab) {
      var url;      
      switch (tab) {
        case 'A':
          url = 'url for tab A'
          break;
        case 'B':
          url = 'url for tab A'
          break;
        case 'C':
          url = 'url for tab A'
      }
      $http.get(url)
        .success(function(data) {
          $scope.data[tab] = data
        })
    }

3个选项卡，一个控制器，不同的参数

1 个答案: