我是 AngularJS 的新手，正在尝试构建一个包含三个选项卡的简单网站。我喜欢 Bootstrap Tabs 界面，所以我以此为基础进行构建:
示例.js
angular.module('base', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('base').controller('UiCtrl', function ($scope, $window) {
content1 = "Bunch of Figs";
array2 = ["Newton 1", "Newton 2"];
content2 = array2.join('<br><br>');
content3 = "Bunch of Widgets";
$scope.tabs = [
{ title:'Figs', content:content1 },
{ title:'Newtons', content:content2 }, //, disabled: true },
{ title:'Widgets', content:content3, select:'alertMe()' }
];
$scope.alertMe = function() {
setTimeout(function() {
$window.alert('You\'ve selected the widget tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
index.html
<!doctype html>
<html ng-app="base">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style type="text/css">
form.tab-form-demo .tab-pane {
margin: 20px 20px;
}
</style>
<div ng-controller="UiCtrl">
<p>
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select">
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
我有两个问题:
1) 连接中的 HTML 标记不会被视为选项卡中的 HTML。 2)动态选项卡没有设置select回调。
如何在选项卡内显示 HTML？
如何将选择回调附加到动态选项卡？
最佳答案
1- 您必须在 html 中使用 ng-bind-html ，并在 Controller 中使用 $sce.trustAsHtml()
HTML:
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()">
<div ng-bind-html="tab.content"></div>
</uib-tab>
</uib-tabset>
Controller :
angular.module('base').controller('UiCtrl', function ($scope, $window, $sce) {
content1 = $sce.trustAsHtml("<h1>Html content<br/> example</h1>");
$scope.tabs = [
{ title:'Figs', content:content1 },
{ title:'Widgets', content:content3, select: $scope.alertMe }
];
....
});
2- 您没有调用该函数。
HTML:
将 select="tab.select" 更改为 select="tab.select()"。
Controller :
将选择:'alertMe()' 更改为选择:$scope.alertMe
关于javascript - 选项卡中的 AngularJS Bootstrap HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42192331/