问题描述
在页面进行一些操作后，会插入一段html代码如何编译这段html，使绑定在上面的事件啦，变量生效啊~
问题解答
回答1：angular出于安全考虑，我们插入的html代码里的事件和绑定的ng-model都不会起作用。
如果要起作用，需要使用angular的$compile service
我一般处理的时候会使用一个directive
javascriptangular.module(...).directive(’jxbBindCompiledHtml’, function ($compile) { ’use strict’; return { template: ’<p></p>’, 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<p jxb-bind-compiled-html='htmlvariable'></p>
htmlvariable是需要插入的html代码变量
回答2：http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs
回答3：<!DOCTYPE HTML><html lang='zh-CN'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'> <title>angular编译插入到dom的元素</title></head><body ng-controller='appCtrl'><!-- javascript================================================== --> <script src='http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js' type='text/javascript'></script> <script src='http://cdn.staticfile.org/angular.js/1.2.0rc3/angular.min.js' type='text/javascript'></script> <script type='text/javascript'>var app = angular.module(’app’, []);app.controller(’appCtrl’, function ($scope, $compile) { $scope.arrs = [1,2,3,4,5,'成', '功', '编', '译']; var html = ’<h1 ng-repeat='arr in arrs'>{{ arr }}</h1>’;// 编译html $html = $compile(html)($scope); // 插入到dom $(’body’).before($html);});angular.bootstrap(document, [’app’]); </script></body></html>
写过一个例子，如上。
