[英]Render text as HTML on AngularJS
我正在尝试在表格内显示文本字段(如表单)。 我有一个按钮,当我单击它时,在表中添加了一行新行,所有单元格均为表单字段。 当我单击按钮时,会出现一个新行(没关系),但是字段的html代码显示为文本。 我试图将其渲染为html,但无法正常工作:
1. 使用angularJs将文本呈现为html 2. AngularJS:将HTML插入视图中 3. http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in- place-using-html5-content-editable.html]
我已经完成了index.html,它提供了3条通往他不同视图的路线。 索引文件包含所有角度片段和我自己的脚本。 我正在寻找最简单的方法。 这是我第一次使用angular。
index.html:
<html ng-app="assets">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="sources/js/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script>
var assets = angular.module('assets', ['ngRoute']);
assets.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html'
}).
when('/:tipusactius', {
templateUrl: 'tipusactius.html',
controller: 'TipusActiusCtrl'
}).
when('/:tipusactius/alta', {
templateUrl: 'tipusactius-alta.html',
controller: 'AfegirTipusActiusCtrl'
}).
otherwise({
redirectTo: '/'
});
});
assets.controller('TipusActiusCtrl', function ($scope, $http){
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/').success(function(data) {
$scope.tipus_actius = data;
});
// Ordena taula per id desc
$scope.sortField = 'idtipus_actius';
$scope.reverse = false;
});
assets.controller('AfegirTipusActiusCtrl', function ($scope, $http, $sce){
$scope.renderHTML = "<input type='text' name='firstname'>";
// Camps formulari text pla
$scope.nomAtribut = "<input type='text' name='firstname'>";
$scope.tipus = "<input type='text' name='firstname'>";
$scope.mida = "<input type='text' name='firstname'>";
$scope.prioritat = "<input type='text' name='firstname'>";
$scope.obligatori = "<input type='text' name='firstname'>";
$scope.atributs = [];
$scope.addField = function() {
$scope.atributs.push($scope.atributs.length);
};
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-view></div>
</body>
</html>
tipusactius-alta.html:
<script>
</script>
<div class="row">
<div class="col-md-8" ng-controller="AfegirTipusActiusCtrl">
<button ng-click="addField()">Nou atribut</button>
<div class="col-md-8">
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td>{{nomAtribut}}</td>
<td>{{tipus}}</td>
<td>{{mida}}</td>
<td>{{prioritat}}</td>
<td>{{obligatori}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
我整个上午都在浪费这东西。 这是没有Html渲染测试的代码。 任何帮助都会有所帮助。
解决了:
最终我像@Ankh那样告诉我:
文本需要由Angular编译为html才能正确呈现。 尝试创建“编译”指令。 这将对传递给它的任何文本调用$ compile。
asset.directive('compile',compile);
function compile($compile) { return { restrict: 'A', replace: true, link: linkFunction }; function linkFunction(scope, element, attrs) { scope.$watch( function (scope) { return scope.$eval(attrs.compile); }, function (value) { element.html(value); $compile(element.contents())(scope); } ); } } .. and in your template <tr ng-repeat="atribut in atributs"> <td compile="nomAtribut"></td> <td compile="tipus"></td> <td compile="mida"></td> <td compile="prioritat"></td> <td compile="obligatori"></td> </tr>
文本需要由Angular编译为html才能正确呈现。 尝试创建“编译”指令。 这将对传递给它的任何文本调用$compile
。
assets.directive('compile', compile);
function compile($compile)
{
return {
restrict: 'A',
replace: true,
link: linkFunction
};
function linkFunction(scope, element, attrs)
{
scope.$watch(
function (scope)
{
return scope.$eval(attrs.compile);
},
function (value)
{
element.html(value);
$compile(element.contents())(scope);
}
);
}
}
..和您的模板中
<tr ng-repeat="atribut in atributs">
<td compile="nomAtribut"></td>
<td compile="tipus"></td>
<td compile="mida"></td>
<td compile="prioritat"></td>
<td compile="obligatori"></td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.