我试图把一些角度的js模板字符串在一个元素，并期望一个编译的输出。但这不是发生。
HTML
<div ng-controller="testController">
<div ng-bind-html-unsafe="fruitsView"></div>
</div>
控制器：
function filterController($scope){
...
$scope.arr = ["APPLE","BANANA"];
$scope.fruitsView = '<div><p ng-repeat="each in arr">{{each}}</p></div>';
}
输出只是{{each}}。
那么如何在一个元素里面插入一个angular js模板字符串(这里$ scope.fruitsView)？
我为此做了一个fiddle。
在这种情况下，你不想只是“插入HTML”，而是编译它。您可以使用$ compile服务创建DOM节点。
var tpl = $compile( '<div><p ng-repeat="each in arr">{{each}}</p></div>' )( scope );
正如你所看到的，$ compile返回一个函数，它将一个作用域对象作为参数，对其进行代码评估。例如，可以将结果内容插入到带有element.append()的DOM中。
重要说明：但是在任何情况下，任何与DOM相关的代码都不属于您的控制器。适当的地方总是一个指令。这个代码可以很容易地被引入到一个指令，但我不知道为什么你在程序中插入所有的HTML。
你能在这里散发一些光，所以我可以提供一个更具体的答案吗？
更新
假设您的数据来自服务：
.factory( 'myDataService',function () {
return function () {
// obvIoUsly would be $http
return [ "Apple","Banana","Orange" ];
};
});
你的模板来自一个服务
.factory( 'myTplService',function () {
return function () {
// obvIoUsly would be $http
return '<div><p ng-repeat="item in items">{{item}}</p></div>';
};
});
然后创建一个简单的指令，读取提供的模板，编译它，并将其添加到显示：
.directive( 'showData',function ( $compile ) {
return {
scope: true,link: function ( scope,element,attrs ) {
var el;
attrs.$observe( 'template',function ( tpl ) {
if ( angular.isDefined( tpl ) ) {
// compile the provided template against the current scope
el = $compile( tpl )( scope );
// stupid way of emptying the element
element.html("");
// add the template content
element.append( el );
}
});
}
};
});
然后从您的视图：
<div ng-controller="MyCtrl">
<button ng-click="showContent()">Show the Content</button>
<div show-data template="{{template}}"></div>
</div>
在控制器中，你只需将它们绑在一起：
.controller( 'MyCtrl',function ( $scope,myDataService,myTplService ) {
$scope.showContent = function () {
$scope.items = myDataService(); // <- should be communicated to directive better
$scope.template = myTplService();
};
});
它应该都在一起工作！
PS：这是假设你的模板来自服务器。如果没有，那么你的模板应该在指令中，这简化了事情。
