我在 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
});
}
最佳答案
我建议您创建一个指令来更好地管理范围和图形状态,例如:
指令:
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>
关于javascript - 使用 ng-include in view 没有显示图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41308094/