在我的项目中有一个脚本，它通过 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"
}]
最佳答案
确实使用了 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>
希望对你有帮助
关于javascript - Angularjs:使用 ng-repeat 执行脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37925122/