jQuery ajax call and AngularJs's controller ($watch)

Question

I have a problem with an user control (.ascx) loaded using jQuery ajax and AngularJs. Due legacy problems, i can't change the way that is loaded the user control. What is the problem? Let me explain you:

The AngularJs's controller has a watcher on the model change BUT due the model is getted using an ajax call, seems that the controller is not "launched" (the $watch doesn't runs when the user control is loaded) due async problems.

My first suggestion was, in the ajax's done process launch an event and, in the angularjs's controller, subscribe to this event but i don't know how can be done correctly and if there are another better options.

Any suggestions please? Thanks in advance.

Here are the code:

The ajax call is the typical:

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

That user control "has" the model needed by AngularJs's directive:

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

The HTML "result" of this user control:

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

This is the angularjs's directive (priceDetailsDirective):

angularApp.directive('priceDetailsLinkDirective', function () { return { restrict: 'E', replace: true, templateUrl: '/angular/prices/price_details_link.html', controller: 'priceDetailsLinkController', scope: { priceParameters: '@' } }; });

score 0 · Answer 1 · edited May 23 '17 at 12:27

Fixed. the problem as I said is that the content is loaded asynchronouslly and we must to re-invoke the angular's directive again to apply the template in the new content. I was surfing and found THE solution.

In my ascx i put a new javascript's script (yes, i need to refactor, just for test purpose) for use the $compile instruction.

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

With this modification, the directive is binded again to the new content and apply the required changed correctly. This information was getted from AngularJS + JQuery : How to get dynamic content working in angularjs (thanks a lot Noah Freitas!)

jQuery ajax call and AngularJs's controller ($watch)

1 Answers1