angular.js - How to manually compile inserted dom in angular?

Question

After some operations are performed on the page, a piece of html code will be inserted. How to compile this piece of html so that the events bound to it and the variables take effect~

PHP中文网 · Answer

For security reasons, the events in the html code we inserted and the bound ng-model will not work.

If you want it to work, you need to use angular’s $compile service

I usually use a directive when processing

javascriptangular.module(...).directive('jxbBindCompiledHtml', function ($compile) {
  'use strict';

  return {
    template: '



',
    scope: {
      rawHtml: '=jxbBindCompiledHtml'
    },
    link: function (scope, elem, attrs) {
      scope.$watch('rawHtml', function (value) {

        if (!value) {
          return;
        }

        // we want to use the scope OUTSIDE of this directive
        // (which itself is an isolate scope).
        var newElem = $compile($.parseHTML(value))(scope.$parent);
        elem.contents().remove();
        elem.append(newElem);
      });
    }
  };
});

html

html

htmlvariable is the html code variable that needs to be inserted

迷茫 · Answer

http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs

世界只因有你 · Answer




    
    
    angular编译插入到dom的元素

I wrote an example, as above.