在頁面進行一些操作後，會插入一段html程式碼
如何編譯這段html，使綁定在上面的事件啦，變數生效~
PHP中文网2017-05-15 16:53:11
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程式碼變數
迷茫2017-05-15 16:53:11
http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs
世界只因有你2017-05-15 16:53:11
<!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>寫過一個例子，如上。