ajax - AngularJS $compile while using third party (jquery) -

ajax - AngularJS $compile while using third party (jquery) -

i'm implementing angularjs on site using jquery load stuff. content loaded asynchronously , appended dom via jquery, not angularjs. have this:

class="snippet-code-js lang-js prettyprint-override">function loadcontent () { $("#target").html("<my-directive></my-directive>"); } var app = angular.module("app", []); app.directive("mydirective", function () { homecoming { restrict: "e", template: "my-directive loaded" } }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="app"> <my-directive></my-directive> <button onclick="loadcontent()">load content</button> <div id="target"></div> </div>

so question is, possible utilize $compile via jquery? there way accomplish it?

i'm aware should load info , seek manage angular it's impossible or i'll break old stuff. why i'm asking such question.

note: simple example, in real case have controllers , other angular stuff in loaded html.

i dont think it's thought utilize angular in ways.

you can this. utilize $http or own service load data. , bind directive's info via =.

but, can utilize $compile accomplish like:

$scope.loadcontent = function () { var html = $compile("<my-directive></my-directive>")($scope); $("#target").append(html); };

more details see http://jsfiddle.net/creeper/cyw9b2pk/

jquery ajax angularjs