How To Load Angularjs Content Via Jqueryui Ajax?

Our teams have inherited a jQuery Mobile project from another office and now we are trying to implement new features using AngularJS. The idea is also to migrate the whole jQuery w

Solution 1:

The problem you have importing templates with angular expressions is angular is not aware of the new content in DOM. Whenever you insert html from outside angular, you need to use $compile so that angular can process all expressions and directives ( including the ng-directives)`

Here's a very simple example of integrating jQueryyUI tabs into a directive to make your demo do what you expect

HTML

<div id="tabs" jq-tabs>

JS

app.directive('jqTabs', function($compile, $timeout) {
  returnfunction(scope, elem, attrs) {
    elem.tabs({/* initalize UI tabs*//* using jQueryUI tabs API, compile angular content in load event callback*/
      load: function(event, ui) {
        $timeout(function() {
          $compile($(ui.panel).contents())(scope)
        });
      }

    });
  }
})

DEMO