AngularJS Custom Chrome Devtools Сеть

Question

Я пытаюсь разработать с помощью angularjs, пользовательской хромированной панели devtool, в которой перечислены сетевые вызовы:

function devToolCtrl($scope, $http) {

  self = $scope;

  self.callData = [];
  self.call = {};
  let i = 0;

  chrome.devtools.network.onRequestFinished.addListener(function (data) {
    data.getContent(function (content) {
      if (data._resourceType == "xhr") {
        if (data.response.status !== 0) {
          let endpoint = data.request.url.substr(data.request.url.lastIndexOf("/") + 1);
          let call = { id: i, endpoint: endpoint, requMeta: data, response: content };
          self.callData.push(call); 
          i++;
        }
      }
    })
  });

  self.clear = function () {
    self.callData = [];
    console.log('AFTER!', self.callData);
  }

  self.charge = function () {
    console.log('CHARGED!', self.callData);
  }
};

angular
  .module('devToolDecript', [])
  .controller('devToolCtrl', devToolCtrl);

Слушатель работает правильно, и массив self.callData заполнен.

В Html-файле я хотел бы видеть список «конечных точек» по:

<li ng-repeat="call in callData | filter:search ">

или простому {{callData}}, но он не работает: (

ни $ watch не стал полезным:

self.$watch('dataArray', function () {
console.log('UPDATE!', self.dataArray);
}, true);

Я вынужден запустить self.charge () (который на самом деле ничего не делает), чтобы увидеть что-то на моей HTML-странице иэто сводит меня с ума! Я действительно понятия не имею, любое предложение более чем оценено, спасибо

Answer 1

Наконец я нахожу «грязное» решение по этому:

AngularJS.Как вызвать функцию контроллера извне компонента контроллера

chrome.devtools.network.onRequestFinished.addListener(function (d) {
  d.getContent(function (c) {
    if (d._resourceType == "xhr") {
      if (d.response.status !== 0) {
        let e = d.request.url.substr(d.request.url.lastIndexOf("/") + 1);
        let call = { endpoint: e, meta: d, content: c };
        var scope = angular.element(document.getElementById("devToolCtrl")).scope();
        scope.$apply(function () {
          scope.dataArray.push(call);;
        });
      }
    }
  })
});

В chrome.devtools.network.onRequestFinished.addListener есть что-то, препятствующее угловой привязке или тому подобное.В поисках вклада для более элегантного решения!