AngularJS Bootstrap HTML中的标签

我是AngularJS的新手，并试图用三个选项卡构建一个简单的站点。我喜欢的引导选项卡界面，所以我建关的是：AngularJS Bootstrap HTML中的标签

example.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）选择回调未设置为动态选项卡。

如何在标签内显示HTML？

如何将选择回调附加到动态选项卡？

来源

2017-02-12 Ken J

什么是生成的HTML？无论如何，你可以发布这jsfiddle？ – Rikin

1 - 您的控制器使用在HTML ng-bind-html和$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>

控制器：

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()"。

控制器： 更改选择：'alertMe()'选择：$scope.alertMe

Check this post about ng-bind-html

Check ui.boostrap docs about tabs

来源

2017-02-12 20:53:53

1.如何显示HTML标签里面？

=>您可以使用ng-bind-html和$sce.trustAsHtml()

HTML

<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()"> 
    <span ng-bind-html="tab.content"></span> 
</uib-tab>

$scope.tabs = [ 
    { title:'Figs', content: $sce.trustAsHtml(content1) }, 
    { title:'Newtons', content: $sce.trustAsHtml(content2) }, //, disabled: true }, 
    { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe } 
    ];

2.如何将选择的回调附加到动态标签？

=>更改select="tab.select"到select="tab.select()"和{ title:'Widgets', content:content3, select:'alertMe()' }到{ title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }

$ scope.alertMe必须定义之前$ scope.tabs

==>您可以参考这个演示：https://codeide.co/master/qVGVQyWG

来源

2017-02-13 02:32:46

你能举个例子来解释吗？ –

我选择跳过标签组件。主要是因为它没有后退按钮支持。此外，导航到ex：另一页上的3：rd选项卡变得非常棘手。所以我使用了简单的路由。例如：如果有3个选项卡，我有3个具有特定路由的页面。为了避免重复选项卡菜单，我创建了一个组件，我把所有三个页面。

<ul ng-controller="tabsCtrl as tabs" class="nav nav-tabs"> 
    <li ng-class="{'active':tabs.generalTab.isActive}"> 
    <a ng-href="{{tabs.generalTab.path}}" translate>general.GENERAL</a> 
    </li> 
    <li ng-class="{'active':tabs.settingsTab.isActive}"> 
    <a ng-href="{{tabs.settingsTab.path}}" translate>settings.MENU_LABEL</a> 
    </li> 
    <li ng-class="{'active':tabs.extrasTab.isActive}"> 
    <a ng-href="{{tabs.extrasTab.path}}" translate>extras.MENU_LABEL</a> 
    </li> 
</ul>

来源

2017-02-13 13:37:51

AngularJS Bootstrap HTML中的标签

回答

相关问题