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

我在视图中使用angularjs和ng include。我需要创建一个图形使用动态图。我有5个模板，当我点击一个按钮时显示或隐藏。当我单击按钮时，加载一个模板。在这个模板中，我有一个Id为的div，我想在其中显示图形

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

我的代码：

视图：

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

---

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

指令：

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

angular.module（'tAngularApp'）。指令（'ngGraphic'，function（）{
返回{
限制：“A”，
模板：“汇总折线图”，
链接：函数（$scope、element、attrs、ctrl）{
$scope.templates=[
{url:'views/explore-dataset/summary.html'，title:'summary'}，
{url:'views/explore dataset/linechart.html'，标题：'linechart'}，
{url:'views/explore-dataset/bar-chart.html'，标题：'bar-chart'}，
{url:'views/explore dataset/scatter.html'，标题：'scatter Plot'}，
{url:'views/explore-dataset/pie-chart.html'，标题：'pie-chart'}，
{url:'views/explore-dataset/correlation.html'，title:'correlation'}
];
$scope.exploreLineChart=函数（索引）{
$（'#折线图'）.text（'显示：'+$scope.templates[index].title+'template'）；
//TODO:创建图形
}
}
};
});

Html:

---

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

指令：

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

angular.module（'tAngularApp'）。指令（'ngGraphic'，function（）{
返回{
限制：“A”，
模板：“汇总折线图”，
链接：函数（$scope、element、attrs、ctrl）{
$scope.templates=[
{url:'views/explore-dataset/summary.html'，title:'summary'}，
{url:'views/explore dataset/linechart.html'，标题：'linechart'}，
{url:'views/explore-dataset/bar-chart.html'，标题：'bar-chart'}，
{url:'views/explore dataset/scatter.html'，标题：'scatter Plot'}，
{url:'views/explore-dataset/pie-chart.html'，标题：'pie-chart'}，
{url:'views/explore-dataset/correlation.html'，title:'correlation'}
];
$scope.exploreLineChart=函数（索引）{
$（'#折线图'）.text（'显示：'+$scope.templates[index].title+'template'）；
//TODO:创建图形
}
}
};
});

Html:

您是否尝试过仅用一个简单的图像调试此功能？虽然我不熟悉动态图，但我也不知道您在使用变量

折线图
做什么。我看到它只保存数据，其他什么都没有。您可能还应该使用
var linechart=
。linechart是一个全局变量。在controller I havevar linechart=“”中，您是否尝试过仅用一个简单的图像调试此功能？虽然我不熟悉动态图，但我也不知道您在使用变量
折线图
做什么。我看到它只保存数据，其他什么都没有。您可能还应该使用
var linechart=
。linechart是一个全局变量。在控制器中，I havevar linechart=“”
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
            }
        }
    };
});

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