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

我有一個用jQuery ajax和AngularJs加載的用戶控件（.ascx）有問題。由於遺留問題，我無法改變加載用戶控件的方式。問題是什麼？讓我解釋一下：

AngularJs的控制器在模型更改上有一個觀察者，但由於模型使用ajax調用得到，似乎控制器沒有「啓動」（$ watch在用戶不運行時運行控制加載）由於異步問題。

我的第一個建議是，在ajax完成的過程中啓動一個事件，並在angularjs的控制器中訂閱此事件，但我不知道如何正確完成以及是否還有其他更好的選項。

有什麼建議嗎？提前致謝。

這裏是代碼：

AJAX調用是典型的：

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

該用戶控制「擁有」的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 「結果」：

<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（ 'priceDetailsLinkDirective'，函數（）{ 回報{ 限制： 'E'，取代：真實， templateUrl ：'/angular/prices/price_details_link.html'， controller：'priceDetailsLinkController'， scope：{ priceParameters：'@' } }; }）;

來源

2014-10-06 user3437362

固定。我說的問題是內容是異步加載的，我們必須再次調用angular的指令來將模板應用到新內容中。我正在衝浪並找到解決方案。

在我的ascx中，爲了使用$ compile指令，我放了一個新的javascript腳本（是的，我需要重構，僅用於測試目的）。

<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！）

來源

2014-10-07 08:31:58 user3437362

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

回答

相關問題