gpt4 book ai didi

javascript - 使用 ng-bind-html 时 Angular 选项卡会中断

转载 作者:行者123 更新时间:2023-11-28 08:33:15 26 4
gpt4 key购买 nike

我正在使用带有 Bootstrap 和 Angular 文本模块的 Angular ui 来构建选项卡生成器
我正在使用 ng-bind-html 允许 Angular-text 模块中的选项卡内容包含 html
问题是我这样做后布局被破坏了
我该如何解决这个问题?
这是代码

        <!DOCTYPE HTML>
<html lang="en-US" ng-app="myModule">
<head>
<meta charset="UTF-8">
<link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/styles.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js"></script>
<script>

angular.module('myModule', ['ui.bootstrap','textAngular', 'ngSanitize']);

var TabsCtrl = function ($scope) {
$scope.tabs = [];

$scope.addTab = function() {
$scope.tabs.push({
title: $scope.tab_heading ,
content:$scope.tab_content
});
};
};
</script>
<title>Angular UI</title>
</head>
<body>

<div class="tbh" ng-controller="TabsCtrl">
<tabset>

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-bind-html="tab.content" active="tab.active" disabled="tab.disabled">

</tab>
</tabset>
<hr/>
<h3>Add Tab</h3>
<label>Tab Title</label><input type="text" ng-model="tab_heading" class="form-control"/><br/><br/>
<label>Tab Content</label>
<div text-angular="text-angular" ng-model="tab_content"></div>
<br/><br/>

<button class="btn-info btn" ng-click="addTab(); tab_content ='';tab_heading='';">Add Tab</button>

</div>
</body>
</html>

最佳答案

ng-bind-html 您必须使用 $sanitize 服务解析选项卡内容,例如 ..

将 html 内容解析为可信 html 以确保安全......就像

$scope.trustedHtml = function (html_code) {
return $sce.trustAsHtml(html_code);
}

ng-bind-html中使用受信任的html..就像..

ng-bind-html="trustedHtml(tab.content)"

正在工作......

         <!DOCTYPE HTML>
<html lang="en-US" ng-app="myModule">
<head>
<meta charset="UTF-8">
<link rel="stylesheet prefetch" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/styles.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
<script src="ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js"></script>
<script>

angular.module('myModule', ['ui.bootstrap','textAngular', 'ngSanitize']);

var TabsCtrl = function ($scope, $sce) {
$scope.tabs = [];

$scope.trustedHtml = function (html_code) {
return $sce.trustAsHtml(html_code);
}
$scope.addTab = function() {
$scope.tabs.push({
title: $scope.tab_heading ,
content:$scope.tab_content
});
};
};
</script>
<title>Angular UI</title>
</head>
<body>

<div class="tbh" ng-controller="TabsCtrl">
<tabset>

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-bind-html="trustedHtml(tab.content)" active="tab.active" disabled="tab.disabled">

</tab>
</tabset>
<hr/>
<h3>Add Tab</h3>
<label>Tab Title</label><input type="text" ng-model="tab_heading" class="form-control"/><br/><br/>
<label>Tab Content</label>
<div text-angular="text-angular" ng-model="tab_content"></div>
<br/><br/>

<button class="btn-info btn" ng-click="addTab(); tab_content ='';tab_heading='';">Add Tab</button>

</div>
</body>
</html>

试试这个...

关于javascript - 使用 ng-bind-html 时 Angular 选项卡会中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21581574/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com