Для последнего браузера, такого как Chrome, вы можете использовать API-интерфейс , как в этом учебнике :
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);
В этом случае вы не хотите просто «вставлять HTML», а компилируете его. Вы можете создавать узлы DOM с помощью службы $compile
.
var tpl = $compile( '<div><p ng-repeat="each in arr">{{each}}</p></div>' )( scope );
Как вы можете видеть, $compile
возвращает функцию, которая принимает объект области в качестве параметра, по отношению к которому вычисляется код. Результирующий контент может быть вставлен в DOM с помощью element.append()
, например.
Важное примечание: но в никакие обстоятельства не содержат какого-либо кода, связанного с 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: все это предполагает, что ваш шаблон поступает с сервера. Если это не так, то ваш шаблон должен быть в директиве, что упрощает вещи.