AngularJS JQuery How to get dynamic content working in angularjs

Question

I am working on a Ajax app using both jQuery and AngularJS    When I update content  which contains AngularJS bindings  of a div using jQuery s html function  the AngularJS bindings doesn t work   Following is code of what I am trying to do    x000D   x000D    document  ready function     x000D        refreshButton   click function     x000D          dynamicContent   html   lt button ng-click  count   count   1  ng-init  count 0  gt Increment lt  button gt  lt span gt count    count    lt  span gt    x000D        x000D      x000D   lt  style gt  lt script src  http   docs angularjs org angular-1 0 1 min js  gt  lt  script gt  lt style gt  ng-invalid   x000D    border  1px solid red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app    gt  x000D     lt div id  dynamicContent  gt  x000D       lt button ng-click  count   count   1  ng-init  count 0  gt  x000D          Increment x000D         lt  button gt  x000D       lt span gt count    count    lt  span gt  x000D     lt  div gt  x000D   x000D   x000D     lt button id  refreshButton  gt  x000D      Refresh x000D     lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    I have dynamic content inside a div with the ID  dynamicContent  and I have a refresh button that would update contents of this div when refresh is clicked  Increment works as expected if I don t refresh the content  but after I refresh  the AngularJS binding stops working   This may not be valid in AngularJS  but I initially built application with jQuery and started using AngularJS later on so I can t migrate everything to AngularJS  Any help with getting this working in AngularJS is greatly appreciated

User · Accepted Answer

You need to call  compile on the HTML string before inserting it into the DOM so that angular gets a chance to perform the binding   In your fiddle  it would look something like this       dynamicContent   html     compile        lt button ng-click  count   count   1  ng-init  count 0  gt Increment lt  button gt  lt span gt count    count    lt  span gt       scope       Obviously   compile must be injected into your controller for this to work   Read more in the  compile documentation

User · Answer

Addition to  jwize s answer  Because angular element document  injector   was giving error injector is not defined So  I have created function that you can run after AJAX call or when DOM is changed using jQuery      function compileAngularElement  elSelector             var elSelector    typeof elSelector     string     elSelector   null                    The new element to be added         if  elSelector    null                 var  div      elSelector                        The parent of the new element                 var  target       ng-app                    angular element  target  injector   invoke    compile   function   compile                            var  scope   angular element  target  scope                             compile  div   scope                              Finally  refresh the watch expressions in the new element                          scope  apply                                                        use it by passing just new element s selector   like this   compileAngularElement    user

User · Answer

Another Solution in Case You Don t Have Control Over Dynamic Content   This works if you didn t load your element through a directive  ie  like in the example in the commented jsfiddles     Wrap up Your Content  Wrap your content in a div so that you can select it if you are using JQuery  You an also opt to use native javascript to get your element     lt div class  selector  gt       lt grid-filter columnname  LastNameFirstName  gridname  HomeGrid  gt  lt  grid-filter gt   lt  div gt    Use Angular Injector  You can use the following code to get a reference to  compile if you don t have one        selector   each function          var content     this       angular element document  injector   invoke function  compile            var scope   angular element content  scope             compile content  scope                 Summary  The original post seemed to assume you had  a  compile reference handy  It is obviously easy when you have the reference  but I didn t so this was the answer for me    One Caveat of the previous code  If you are using a asp net mvc bundle with minify scenario you will get in trouble when you deploy  in release mode  The trouble comes in the form of Uncaught Error    injector unpr  which is caused by the minifier messing with the angular javascript code   Here is the way to remedy it    Replace the prevous code snippet with the following overload        angular element document  injector   invoke          compile   function  compile            var scope   angular element content  scope             compile content  scope                   This caused a lot of grief for me before I pieced it together

[jquery] AngularJS + JQuery : How to get dynamic content working in angularjs

Examples related to jquery

Examples related to angularjs