如何在 ASP.NET MVC ajax 加载的弹出窗口中使用 AngularJS答案

【问题标题】：How to use AngularJS in ASP.NET MVC ajax-loaded popup如何在 ASP.NET MVC ajax 加载的弹出窗口中使用 AngularJS
【发布时间】：2014-10-03 17:17:44
【问题描述】：

我刚开始使用 AngularJS，我想将它集成到现有的 ASP.NET MVC 应用程序中。

我创建了简单的 Angular HelloWorld 应用程序，我返回一个由控制器操作呈现的简单视图：

<div ng-app="HelloNg">
    <h1> Hello {{1+1}} you</h1>
</div>

效果很好 - 我可以看到正确评估的角度表达式。

但在我们的应用中，数据通常显示在 ajax 加载的弹出窗口中。所以基本上 JavaScript 向 MVC 控制器发出请求，视图被渲染并被发回。然后 JavaScript 将其填充到准备好的 div 中，并将该 div 显示为弹出窗口。

在这种情况下，角度表达式不会被处理，{{1 + 1}} 会逐字呈现到屏幕上。托管弹出窗口的主页是标准的 ASP.NET 页面 - 它根本不使用 angular，但它确实导入了 angular 脚本。

据我了解，我应该使用 angular $compile 服务让 angular 知道它 - 但是我不确定如何设置 $scope 变量。

谁能指出我正确的方向？在大多数示例中，我可以看到在角度控制器或指令中使用了 $compile 服务，但在我的情况下，我试图从角度世界之外进行。

主页很大，此时我不想将其转换为 angular - 所以让弹出窗口仅使用 angular 对我来说非常有用。

【问题讨论】：

标签： javascript asp.net asp.net-mvc angularjs

【解决方案1】：

找到了一些相关的问题，尤其是this one，终于搞明白了：

// Here data is HTML returned from ajax

angular.injector(['ng']).invoke(['$compile', '$rootScope', 
  function (compile, rootScope) {
    var scope = rootScope.$new();
     var result  = compile(data)(scope);            
     scope.$apply();             
     data = result;

     // Here data is same HTML but now it is recognized by angular  
     ... render it to page here ...
   }
]);

它可能可以做得更好，但这似乎对我所有人都有效 - 当弹出窗口显示时处理所有角度标记 - 并且所有绑定似乎也有效。

【讨论】：