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))" />
...

在第一页加载时，这个控件显示得很好。但是，在单击按钮时，我会通过 ajax 为 md-switch 所在的容器检索一个新的局部视图，如下所示：

 $.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-switchs 都不可见，尽管它们确实出现在 DOM 上并且似乎与任何操作发生之前的格式相同。

在查看了许多帖子之后，我仍然不确定我在这里缺少什么。感谢所有帮助。

Answer 1

我在我的 jquery 脚本中使用$compile 找到了解决问题的方法，如下所示：

我的 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 无法识别它