javascript - 使用 ng-include in view 没有显示图形

Question

我在 View 中使用 angularjs 和 ng-include 。我需要使用 dygraph 创建图形。我有 5 个模板，单击一个按钮即可显示或隐藏。当我单击按钮 ng-include 时加载模板。在此模板中，我有一个带有 Id 的 div，我想在其中显示图形。

问题是当我点击时这个id在DOM中不存在。如果我再次单击，它会毫无问题地显示图形，因为 Id 存在。

我的代码:

查看:

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

模板:

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

Controller :

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

Answer 1

我建议您创建一个指令来更好地管理范围和图形状态，例如:

指令:

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>