Question

我在视图中使用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>

控制器：

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

在视图中不使用ng-include显示图形

1 个答案: