Блог

Я разрабатываю расширение Chrome, которое добавляет функциональность в веб-приложение AngularJS. Одна из вещей, которую мне нужно сделать, — это изменить шаблон директивы, используемой в указанном приложении. Для этого я планирую создать новую директиву и изменить шаблон состояния, чтобы использовать свой собственный.

Я попытался создать директиву, сделав что-то вроде этого:

 testDirective.$inject = [];

function testDirective() {
  var directive = {
    restrict: 'E',
    replace: true,
    template: "<p>Hello world.</p>"
  };

  return directive;
}
angular.module('app').directive('testDirective', testDirective);
 

Это, кажется, регистрируется нормально, но когда я начинаю его использовать, ничего не происходит. Я изменил шаблон состояния и перезагрузил его:

 const stateService = angular.element(document.body).injector().get('$state');
stateService.router.stateRegistry.states['state'].views["$default"].template = `<test-directive></test-directive>`
stateService.reload('state');
 

На результирующей странице есть один элемент <test-directive> «когда я ожидаю <p>Hello world.</p> «.

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

Спасибо