Compiling HTML into the Umbraco 8 backoffice

compile.js

// in u7 we could grab scope off any element via angular.element('selector').scope()
// not the case in u8, since debugInfoEnabled has been set to false (which is a good thing)

// this is happening in the context of a content app controller 
// but could be refactored to working with an interceptor

export class AppController {
  constructor($scope, $compile, $element) {   
    
    // from the content app scope, find the content form scope
    // we can't get it from the contentForm element, we need to traverse the scope tree
    let editorScope = $scope.$parent;
    do {
        editorScope = editorScope.$parent;
    } while (!Object.prototype.hasOwnProperty.call(editorScope, 'contentForm'));

    // once we have the correct scope, update the footer html
    // replacing Umbraco's markup with our own
    if (editorScope) {
      // this is in two steps because I use contentForm elsewhere in the ctor
      // no reason this couldn't be combined into a single selector
      const contentForm = angular.element($element.closest('[name="contentForm"]'));
      const footerRight = angular.element(contentForm.find('.umb-editor-footer-content__right-side'));

      // at this point, it's just html, we need it compiled and part of the AngularJs application
      // by passing editorScope to $compile, we have access to everything on that scope inside our new component
      // eg in the workflowHook component, $scope.$parent is editorScope, with the current content item available
      footerRight.html('<workflow-hook></workflow-hook>');
      $compile(footerRight.contents())(editorScope);  
    }
  }
}