Question

我遇到了使用jQuery ajax和AngularJs加载的用户控件（.ascx）的问题。由于遗留问题，我无法改变加载用户控件的方式。问题是什么？让我解释一下：

AngularJs的控制器在模型更改BUT上有一个观察者，因为模型是使用ajax调用得到的，似乎控制器没有被启动＆＃34; （因为异步问题，$ watch在加载用户控件时没有运行）。

我的第一个建议是，在ajax的完成过程中发起了一个事件，并且在angularjs的控制器中，订阅了这个事件，但我不知道怎样才能正确完成，如果还有另一个更好的选择。

有什么建议吗？提前谢谢。

以下是代码：

ajax调用是典型的：

$.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })

该用户控件＆＃34;有＆＃34; AngularJs指令所需的模型：

<span class="price-value">

  <%= Model.Price %> 

  <asp:PlaceHolder ID="PriceLinkPlaceHolder" runat="server">

      <price-details-link-directive data-price-parameters="<%= Server.HtmlEncode(Model.SerializedPriceParameters) %>">

  </asp:PlaceHolder>

</span>

HTML＆＃34;结果＆＃34;这个用户控件：

<span class="price-value">
  €449
          <price-details-link-directive data-price-parameters="{
  &quot;priceDetailType&quot;: 2,
  &quot;price&quot;: 449.0,
  &quot;accommodationId&quot;: 38350,
  &quot;departureDate&quot;: &quot;01-01-0001&quot;,
  &quot;transportType&quot;: 0,
  &quot;duration&quot;: -1,
  &quot;minOccupancy&quot;: -1,
  &quot;maxOccupancy&quot;: -1,
  &quot;roomType&quot;: &quot;&quot;,
  &quot;catalogBaseUrl&quot;: &quot;&quot;
}">
</price-details-link-directive>

</span>

这是angularjs的指令（priceDetailsDirective）：

angularApp.directive（＆＃39; priceDetailsLinkDirective＆＃39;，function（）{ 返回{ 限制：＆＃39; E＆＃39;，替换：true， templateUrl：＆＃39; /angular/prices/price_details_link.html'， controller：＆＃39; priceDetailsLinkController＆＃39;，范围： { priceParameters：＆＃39; @＆＃39; } }; }）;

Answer 1

固定。我说的问题是内容是异步加载的，我们必须再次重新调用angular的指令以在新内容中应用模板。我在冲浪，找到了解决方案。

在我的ascx中我添加了一个新的javascript脚本（是的，我需要重构，仅用于测试目的）才能使用$ compile指令。

<span class="price-value">
    <%= Model.Price %>
    <asp:PlaceHolder ID="PriceLinkPlaceHolder" runat="server">
        <price-details-link-directive data-price-parameters="<%= Server.HtmlEncode(Model.SerializedPriceParameters) %>"></price-details-link-directive>
    </asp:PlaceHolder>
</span>

<script type="text/javascript">
    $(".price-value").each(function () {
        var content = $(this);
        angular.element(document).injector().invoke(function ($compile) {
            var scope = angular.element(content).scope();
            $compile(content)(scope);
        });
    });
</script>

通过此修改，指令再次绑定到新内容并正确应用所需的更改。这些信息来自AngularJS + JQuery : How to get dynamic content working in angularjs（非常感谢Noah Freitas！）

jQuery ajax调用和AngularJs的控制器（$ watch）

1 个答案: