我正在尝试使用$sanitizeprovider和ng-bind-htm-unsafe指令允许我的控制器将HTML注入DIV.
但是,我无法让它发挥作用.
<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>
我发现它是因为它从AngularJS中删除了(谢谢).
但没有ng-bind-html-unsafe,我得到这个错误:
我有一个带有多个标签的标签页,一旦点击就会调用服务来返回一些数据.其中一些数据返回html表单并且非常随机.我想收集输入的值,并通过服务将数据发送回服务器.我遇到的问题是我无法从动态创建的html中的输入元素中获取数据.
我创建了一个Plunker来展示问题所在.请注意,html值可以随时更改,因此硬编码html将无法正常工作.这里是来自plunker的代码,但请查看plunker以获得最佳视图.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce, $compile) {
$scope.name = 'World';
$scope.html = "";
$scope.htmlElement = function(){
var html = "<input type='text' ng-model='html'></input>";
return $sce.trustAsHtml(html);
}
});
的index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-bind-html="htmlElement()"></div>
{{html}}
</body>
</html>
我正在尝试page_elements使用.grid-cell字符串html中的适当索引绑定数组,以便它将显示在页面上而不是在我的指令中.我存储给定单元格元素的索引,然后过滤它们以检索匹配的page_elements对象.
但是,我无法摆脱ng-repeat网格中的冗余,其中有一个元素.已删除的元素将替换为空对象{},但应将其拼接,以便将网格元素保持在正确的位置.移动的元素应该能够放入其他网格单元格中.如果索引被正确分配,那么指令应该使用angular-drag-and-drop-lists,如何修复它？
如何在给定网格中仅ng-repeat匹配匹配page_elements一次？例如,现在page_elements在那里grid_id: 2的显示三次ng-repeat在第三格栅.如何删除永久页面元素对象并将单元格元素保存在正确的位置？在当前的解决方案中,拖放机制也被打破了.
当前代码片段和jsfidde:
var app = angular.module('app', ['dndLists']);
app.controller('homeCtrl', function ($scope) {
$scope.html_string = "<div class='container'><div class='row'><div class='col-xs-12'><div class='row'><div class='col-xs-4 grid-cell'></div><div class='col-xs-4 grid-cell'></div><div class='col-xs-4 grid-cell'></div></div><div class='row'><div class='col-xs-4 grid-cell'></div><div class='col-xs-4 grid-cell'></div><div class='col-xs-4 grid-cell'></div></div></div></div></div>";
$scope.page_elements = [{
"grid_id": 0,
"position": 0,
"snippet": "<h4>First Grid 0</h4>",
"template": "snippet"
}, {
"grid_id": 0,
"position": 1,
"snippet": "<h2>Second Grid 0</h2>",
"template": …