我是 angularjs 的新手。在我的项目中,我得到一个 HTML 文件作为 http 响应。ng-bind-html 适用于 html 代码。但是html 中的 angularjs 代码没有被编译。我尝试了 $compile 的解决方案,但没有任何效果。请为此提出一个好的解决方案。
假设我们有一个这样的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TEST</title>
<script src="angular.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="myController">
<p compile="htmlresponse"></p>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('myController', function ($rootScope,$sce) {
$http.get(,,,,).success(function(data){
$rootScope.htmlResponse=$sce.trustAsHtml(data);
}
});
app.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(htmlResponse) {
element.html(htmlResponse);
$compile(element.contents())(scope);
}
);
};
});
</script>
</body>
</html>
如果我只得到 HTML 作为响应,这很好用。当我使用 angularjs(包括 app.module、app.controller、app.directives)获取 HTML 时,只有 html 部分被编译。请帮我解决这个问题。
这是我的示例回复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-animate.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="myController">
{{name.myname}}
</div>
<script>
var app = angular.module('myapp', []);
app.controller('myController', function ($scope) {
$scope.name={};
$scope.name.myname = "stack";
});
</script>
</body>
</html>