Angularjs: Выполнение скрипта с использованием ng-repeat

Question

В моем проекте есть сценарий, который загружается через 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" }]

Answer 1

Dido использовать обещание так, что вы убедитесь, что данные не равно нулю, прежде чем вернуть его. почему вы не будете пытаться

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

Или, может быть, тест, если существует значение (или не), перед входом в директиву. сделать это;

<li ng-repeat="values in Value" ng-if"Value"> 
    <bind-javascript html1="{{values.value}}" ></bind-javascript>  
</li> 

Надеется, что это помогает

Answer 2

Я получил это (в основном) работает here используя копию измененных данных. Единственное реальное изменение, которое я сделал, это изменить {{values.value}} на тот, который вы указали, который вы будете использовать. Я также отмечаю, что вашему второму элементу массива на самом деле не хватает последовательности символов ~#~, которую вы пытаетесь разбить, так что один возвращает массив только одного элемента, а вызов scope.graphValue[1]; возвращает неопределенный.

Я не знаю, какие предметы у вас могут быть, которые не опубликованы, которые могли бы внести вклад в проблему, которую вы видите, но на основе того, что вы предоставили, она должна работать, просто называя правильный атрибут элемента $ scope.Value array в вашем ng-repeat.

У меня нет ваших зависимостей в графике в моем тесте, но если вы запустите его самостоятельно, вы увидите, что он пытается выполнить javascript, возвращаемый вашим веб-сервисом, и в моем случае получает «Uncaught ReferenceError: google is не определен". Вы видите эту ошибку или нет? В любом случае, есть разные вещи, чтобы попробовать дальше. Если Google не определен, ваш скрипт не сможет получить доступ к другим ресурсам, которые вы уже подготовили в своем приложении, но может быть недоступен для этого сценария. Если вы не видите эту ошибку, убедитесь, что вы правильно ее вводите в свое приложение.

Редактировать: Я просто добавил небольшое изменение в шаблон вашей директивы, который может иметь для вас все значение. Обертка вашего шаблона директивы в заполнителе <div></div> позволяет угловым образом вставлять тег <script></script> внутри вашей директивы правильно. Это нормальное поведение с директивами, которые содержат replace: true, поскольку угловые требуют, чтобы они имели один корневой элемент, и добавление вашего тега скрипта нарушило бы это.Он по-прежнему не объясняет, почему вы видите, что он работает вообще, но это изменение для моего plunkr, которое позволяет ему успешно внедрять скрипты на страницу.

Редактировать 2: Хорошо, я не скажу, что это лучший ответ. На самом деле я собираюсь сказать, что это действительно очень плохой ответ, но он показывает хотя бы один способ обойти проблему с задержкой, в то время как обещания решаются. У меня есть updated the plunker, чтобы показать это решение и надеемся, что это хорошая отправная точка для работы ваших графиков. Обратите внимание, что мне пришлось добавить третий раздел в ответ json, добавив имя метода обратного вызова в конце строки с номером ~#~functionName. Вероятно, вам было бы лучше сделать каждую часть отдельным атрибутом json-объекта вашего ответа только для эффективности (избегая использования split()), но это зависит от вас.

Мне также интересно, если бы вы взглянули на angular-google-chart, чтобы избежать этой проблемы полностью? Кажется, он инкапсулирует привязку диаграммы javascript в собственную директиву, которая может полностью устранить эту проблему. Я собирался попробовать его с вашим кодом, но плункер, похоже, не может найти его для включения, когда я пытаюсь.