在我的项目中，有一个脚本通过http响应加载。在我获得响应数据后，我使用指令分离内容和脚本，然后将其显示在前端。我的脚本应该生成一个图表。问题是当我从http获取数据时，图表没有显示。但如果我使用静态数据，它将显示图形。
此外，如果我使用alert（），图表正在加载...我无法解决此问题。
从http
获取数据.controller('AppController', ['$http', '$scope', '$templateCache', '$sce',
function ($http, $scope, $templateCache, $sce) {
$http.get("http://some url").success(function (data) {
$scope.Value = data;
});
前端展示：
<li ng-repeat="values in Value">
<bind-javascript html1="{{values.GENERATEDKPI}}" ></bind-javascript>
</li>
分隔内容并执行脚本：
directive('bindJavascript', function ($sce,$timeout, $http) {
return {
restrict: 'E',
scope: {
html1: '@'
},
template: '<div ng-bind-html="trustedHTML"></div>',
replace: true,
link: function (scope, element, attrs) {
scope.graphValue = scope.html1.split('~#~'); //separated the content and script
scope.trustedHTML = $sce.trustAsHtml(scope.graphValue[0]);
if (scope.graphValue[1] != undefined) {
var script = angular.element(document.createElement('script'));
script[0].text = scope.graphValue[1];
angular.element(element).append(script[0]);
}
}
};
});
示例数据：
[{
"ASSIGNMENTID": null,
"CUSTOMTITLE": null,
"DISPTYPEID": "4",
"GENERATEDKPI": "<div data-row=\"4\" data-col=\"1\" data-sizex=\"4\" data-sizey=\"3\" class=\"modal-content\"><header style=\"background-color: #457DC7\" class=\"Tooltip\" title=\"Idling Percentage: CustomTitle Test for Tooltip Plugin\"> Idling Percentage: CustomTitle Test for Tooltip Plugin <\/header>\u000d\u000a\u0009\u0009<div class=\"chartsdiv\">\u000d\u000a\u0009\u0009<div id=\"chart_div_1\"><\/div>\u000d\u000a\u0009\u0009<\/div>\u000d\u000a\u0009\u0009<div class=\"MoreInfoPanel scrollbar-inner\"><div class=\"KPISettings\"><table><tr><td class=\"caption\">Fleet:<\/td><td>All<\/td><\/tr><tr><td class=\"caption\">Vehicle:<\/td><td> E87349, N 14855, M 38068<\/td><\/tr>\u000d\u000a\u0009\u0009<tr><td class=\"caption\">Duration:<\/td><td>Last 24 Hours<\/td><\/tr><tr><td class=\"caption\">Range:<\/td><td>20 to 40 %<\/td><\/tr><\/table><\/div>\u0009\u0009\u000d\u000a\u0009\u0009<div class=\"scrollbar-inner scroll-sm\"><table class=\"griddata table table-hover table-responsive\"><thead><th>Vehicle<\/th><th>Value(%)<\/th><th>Status<\/th><\/thead><tbody><tr><td style=\"text-align:left;\">E87349<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">N 14855<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">M 38068<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><\/tbody><\/table><\/div><\/div>\u000d\u000a\u0009\u0009<footer><a class=\"foo_moreinfo\">More Info<\/a><a><img src=\"..\/images\/icn-edit-kpi.png\" alt=\"\" title=\"Click here to Edit KPI\"><\/a>\u000d\u000a<a><img src=\"..\/images\/icn-remove-kpi.png\" alt=\"\" title=\"Click here to remove KPI\"><\/a><\/footer><\/div>\u000d\u000a\u0009~#~\u0009google.setOnLoadCallback(drawChart_1);function drawChart_1() {\u000d\u000a\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009var data = new google.visualization.arrayToDataTable([[\"Bands\", \"No.of.Vehicles\", { role: \"style\" }],[\"Safe\", 3, \"#04B713\"],[\"Warning\", 0, \"#FF7F00\"],[\"Critical\", 0, \"#FE0000\"],]);\u000d\u000a\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009var options = {width: 500,height: 400,colors: [\"Red\"],chartArea: { width: \"50%\" },hAxis: {title: \"KPI Status\",minValue: 0},vAxis: {title: \"No.of.Vehicles\",maxValue: 16,format: \"0\",gridlines: { count: 6 },minorGridlines: { count: 3 }}, legend: { position: \"none\" }};\u000d\u000a\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009var chart = new google.visualization.ColumnChart(document.getElementById(\"chart_div_1\"));chart.draw(data, options);}",
"KPIId": "2",
"Message": "Success",
"REFRESHFREQUENCY": "3",
"ResponseCode": "1"
}, {
"ASSIGNMENTID": null,
"CUSTOMTITLE": null,
"DISPTYPEID": "1",
"GENERATEDKPI": "<div data-row=\"1\" data-col=\"4\" data-sizex=\"2\" data-sizey=\"1\" class=\"modal-content\"><header style=\"background-color: #457DC7\" class=\"Tooltip\" title=\"Idling Cost\"> Idling Cost <\/header>\u000d\u000a\u0009\u0009<div class=\"tilediv\"><table class=\"tiletable\"><tr><td colspan=\"2\"> 0.00\u000d\u000a <\/td><td rowspan=\"2\" colspan=\"2\" style=\"text-align: right\">\u000d\u000a <img src=\"images\/kpi\/img-safe-kpi.png \" \/><\/td><\/tr><tr>\u000d\u000a <td colspan=\"2\" class=\"unitcaption\"> INR <\/td><\/tr><\/table><\/div>\u000d\u000a\u0009\u0009<div class=\"MoreInfoPanel\"><div class=\"KPISettings scrollbar-inner\"><table><tr><td class=\"caption\">Fleet:<\/td><td>All<\/td><\/tr><tr><td class=\"caption\">Vehicle:<\/td><td>All<\/td><\/tr>\u000d\u000a\u0009\u0009<tr><td class=\"caption\">Duration:<\/td><td>Last 1 Week<\/td><\/tr><tr><td class=\"caption\">Range:<\/td><td>9,000.00 to 10,000.00 INR<\/td><\/tr><\/table><\/div>\u0009\u0009\u000d\u000a\u0009\u0009<div class=\"scrollbar-inner scroll-sm\"><table class=\"griddata table table-hover table-responsive\"><thead><th>Vehicle<\/th><th>Value(INR)<\/th><th>Status<\/th><\/thead><tbody><tr><td style=\"text-align:left;\">E87349<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">D47843<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">N 14855<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">M 38068<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">M 38069<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">ADT_veh_20<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">B99506<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><tr><td style=\"text-align:left;\">P 51993<\/td><td>0.00 <\/td><td><img src=\"images\/kpi\/1_.png\" title=\"Safe\"><\/td><\/tr><\/tbody><\/table><\/div><\/div>\u000d\u000a\u0009\u0009<footer><a class=\"foo_moreinfo\">More Info<\/a><a><img src=\"images\/kpi\/icn-edit-kpi.png\" alt=\"\" title=\"Click here to Edit KPI\"><\/a>\u000d\u000a\u0009\u0009<a><img src=\"images\/kpi\/icn-remove-kpi.png\" alt=\"\" title=\"Click here to remove KPI\"><\/a><\/footer><\/div>",
"KPIId": "10",
"Message": "Success",
"REFRESHFREQUENCY": "1",
"ResponseCode": "1"
}]
答案 0 :(得分：0)
Dido使用promise，以便在返回之前确保数据不为null。为什么你不想尝试
.controller('AppController', ['$http', '$scope', '$templateCache', '$sce', '$q' ,
function ($http, $scope, $templateCache, $sce, $q) {
deferred = $q.defer()
$http.get("http://some url").success(function (data) {
deferred.resolve(data)
return deferred.promise
});
或者在输入指令之前测试Value是否存在（或尚未测试）。尝试这样做;
<li ng-repeat="values in Value" ng-if"Value">
<bind-javascript html1="{{values.value}}" ></bind-javascript>
</li>
希望有所帮助
答案 1 :(得分：0)
我已经（大部分）使用您修改后的数据副本here。我做的唯一真正的改变是将{{values.value}}更改为您指定要使用的那个。我还注意到你的第二个数组元素实际上缺少你试图拆分的~#~字符序列，所以只返回一个元素数组，对scope.graphValue[1];的调用返回undefined。
我不知道你可能会发布哪些可能会导致你所看到的问题没有发布的内容，但根据你提供的内容，它应该可以通过简单地调用$ scope元素的正确属性来工作.ng重复中的值数组。
我的测试中没有您的图形依赖项，但是如果您自己运行它，您会看到它确实尝试执行您的Web服务返回的javascript，并且在我的情况下获得“未捕获的ReferenceError：google不是定义”。你看到那个错误还是没有？无论哪种方式，下一步都有不同的尝试。如果未定义Google，则您的脚本无法访问您已在应用中准备的其他资源，但可能超出该脚本的范围。如果您没有看到该错误，请确保将其正确地注入您的应用程序。
修改：我刚刚对您的指令模板添加了一些小改动，这可能会对您产生重大影响。将指令模板包装在占位符<div></div>中允许angular正确地在指令中注入<script></script>标记。这是指向replace: true的指令的正常行为，因为angular要求它们具有单个根元素，并且附加脚本标记会违反该指令。它仍然没有解释为什么你看到它工作，但它是一个改变我的plunkr，让它成功地将脚本注入页面。
编辑2：好的，我不会说这是最好的答案。事实上，我会说这确实是一个非常糟糕的答案，但它确实显示了至少一种解决问题的方法，延迟涉及延迟，而承诺解决了。我有updated the plunker来展示解决方案，并希望它是一个很好的起点，让您的图表工作。请注意，我必须在json响应中添加第三个部分，在字符串末尾添加回调方法名称~#~functionName。你可能最好将每个部分作为响应的json对象的单独属性，只是为了提高效率（避免使用split（）），但这取决于你。
我也想知道你是否看过angular-google-chart或许完全避免这个问题？它似乎将javascript图表绑定封装到一个指令本身，可以完全避免这个问题。我打算用你的代码尝试一下，但是当我尝试时，plunker似乎无法找到它。