AngularJS: динамически загруженный компонент не отображается

Question

Я унаследовал проект, который использует смесь AngularJS и JQuery. В настоящее время у меня возникают проблемы с динамически загружаемой директивой md-switch, которая не отображается при динамической загрузке. Пожалуйста, смотрите следующее:

На мой взгляд, у меня есть

...
<md-switch class="md-primary md-switch-custom-margin" aria-label="Done Switch" ng-model="done"
          ng-change="markDone($event, @Newtonsoft.Json.JsonConvert.SerializeObject(!Model.Done))" />
...

При первой загрузке страницы этот элемент управления показывает себя отлично. Однако по нажатию кнопки я иду, чтобы получить новое частичное представление для контейнера, в котором md-switch живет через ajax, вот так:

 $.ajax({
  url: "../../MyController/GetPartial",
  type: "GET",
  dataType: "html"
}).done(function (response) {
  $("#body-container").html(response);

  var angularScope = angular.element("div[ng-controller='MyAngularController'").scope();

  //have tried both of the following
  //angularScope.$apply();

})

Когда на страницу загружено частичное представление, все мои md-switch на странице не видны, хотя они отображаются в DOM и, похоже, отформатированы так же, как и до того, как произойдет какое-либо действие.

После просмотра многочисленных постов я все еще не уверен, что мне здесь не хватает. Вся помощь приветствуется.

Answer 1

Я нашел решение моей проблемы, используя $compile, как показано в моем скрипте jquery:

готовый обратный вызов моего ajax-запроса:

       .done(function (response) {

          //have angular recompile it's dom directives such as md-switch
          angular.element(document.body).injector().invoke(function ($compile) {
            var container = $("#body-container");
            var scope = container.scope();
            container.html(response);
            $compile(container.contents())(scope);
          })
        }

Answer 2

директива / компонент md-switch не связана и не скомпилирована, поэтому angular не распознает ее