使用ng-include查看沒有圖形顯示

我在視圖中使用了angularjs和ng-include。我需要使用dygraph創建一個圖形。當我點擊一個按鈕時，我有5個模板可以顯示或隱藏。當我點擊ng-include按鈕加載一個模板。在這個模板中，我有一個ID與我想要顯示圖形的div。使用ng-include查看沒有圖形顯示

問題是，當我單擊時，此ID不存在於DOM中。如果我再次點擊，它顯示圖形沒有任何問題，因爲Id存在。

我的代碼：

查看：

<button class="btn" ng-click="exploreLineChart()">Line chart</button> 
<div ng-include="currentTemplate.url"></div>

模板：

<div id="linechart"></div>

控制器：

$scope.templates = [ 
     {url: 'views/explore-dataset/summary.html', title: 'Summary'}, 
     {url: 'views/explore-dataset/line-chart.html', title: 'Line Chart'}, 
     {url: 'views/explore-dataset/bar-chart.html', title: 'Bar Chart'}, 
     {url: 'views/explore-dataset/scatter.html', title: 'Scatter Plot'}, 
     {url: 'views/explore-dataset/pie-chart.html', title: 'Pie Chart'}, 
     {url: 'views/explore-dataset/correlation.html', title: 'Correlation'} 
    ]; 

$scope.exploreLineChart = function() 
    { 
     $scope.currentTemplate = $scope.templates[1]; 
     linechart = new Dygraph(document.getElementById("linechart"), 
      $scope.csvContent, 
      { 
       height: 320 
      }); 
    }

來源

2016-12-23 maikelm

您是否嘗試過只用一個簡單的圖像調試呢？雖然我不熟悉Dygraphs，但我也沒有看到你對變量'linechart'做了什麼。我看到它擁有數據，但沒有別的。你也應該使用'var linechart ='。 –

linechart是一個全局變量。在控制器中，我hasvar linechart =「」 – maikelm

我建議你創建一個指示，以更好地管理範圍和圖形狀態，例如：

指令：

angular.module('tAngularApp').directive('ngGraphic', function() { 
    return { 
     restrict: 'A', 
     template: '<button class="btn" ng-click="exploreLineChart(0)">Summary</button><button class="btn" ng-click="exploreLineChart(1)">Line chart</button><div id="linechart"> </div>', 
     link: function($scope,element, attrs, ctrl) { 

      $scope.templates = [ 
       {url: 'views/explore-dataset/summary.html', title: 'Summary'}, 
       {url: 'views/explore-dataset/line-chart.html', title: 'Line Chart'}, 
       {url: 'views/explore-dataset/bar-chart.html', title: 'Bar Chart'}, 
       {url: 'views/explore-dataset/scatter.html', title: 'Scatter Plot'}, 
       {url: 'views/explore-dataset/pie-chart.html', title: 'Pie Chart'}, 
       {url: 'views/explore-dataset/correlation.html', title: 'Correlation'} 
      ]; 

      $scope.exploreLineChart = function (index) { 
       $('#linechart').text('displaying : ' + $scope.templates[index].title + ' template'); 
       // TODO: Create the Graph 
      } 
     } 
    }; 
});

HTML：

<div ng-graphic=""></div>

來源

2016-12-23 22:26:41 Yoan

使用ng-include查看沒有圖形顯示

回答

相關問題