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-switch 都不可见，尽管它们确实出现在 DOM 上并且看起来格式与在任何动作发生之前。

在查看了大量帖子后，我仍然不确定我在这里遗漏了什么。感谢所有帮助。

Answer 1

md-switch 指令/组件未链接且未编译，因此angular无法识别

Answer 2

我在我的 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);
          })
        }

AngularJS: 动态加载的组件未显示

AngularJS: dynamically loaded component not showing

.net

angularjs

asp.net-mvc

razorengine

dynamic-content