标签中的AngularJS引导HTML

Question

I'm new to AngularJS and am trying to build a simple site with three tabs. 我是AngularJS的新手，正在尝试用三个选项卡构建一个简单的网站。 I like the Bootstrap Tabs interface so I'm building off of that: 我喜欢Bootstrap Tabs界面，因此我以此为基础：

example.js 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 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>

I have two problems: 我有两个问题：

1) The HTML tags in the join are not treated as HTML in the tabs. 1）连接中的HTML标记在选项卡中不被视为HTML。 2) The select callback is not set to the dynamic tab. 2）select回调未设置为动态选项卡。

How can I display HTML inside the tabs? 如何在标签内显示HTML？

How can I attach select callbacks to dynamic tabs? 如何将选择回调附加到动态选项卡？

Answer 1

1- You have to use ng-bind-html in your html, and $sce.trustAsHtml() in your controller 1-您必须在ng-bind-html中使用ng-bind-html html，并在控制器中使用$sce.trustAsHtml()

HTML: 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- You aren't calling the function. 2-您没有调用该函数。

HTML: Change select="tab.select" to select="tab.select()" . HTML：将 select="tab.select"更改为select="tab.select()" 。

CONTROLLER: Change select: 'alertMe()' to select: $scope.alertMe 控制器：更改选择： 'alertMe()'以选择： $scope.alertMe

Check this post about ng-bind-html 查看有关ng-bind-html的帖子

Check ui.boostrap docs about tabs 检查关于选项卡的ui.boostrap文档

Answer 2

1. How can I display HTML inside the tabs? 1.如何在标签内显示HTML？

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

HTML 的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>

JS JS

  $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. How can I attach select callbacks to dynamic tabs? 2.如何将选择回调附加到动态选项卡？

=> Change select="tab.select" to select="tab.select()" and { title:'Widgets', content:content3, select:'alertMe()' } to { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe } =>将select="tab.select"更改为select="tab.select()" ，将{ title:'Widgets', content:content3, select:'alertMe()' }更改为{ title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }

$scope.alertMe must be defined before $scope.tabs $ scope.alertMe必须在$ scope.tabs之前定义

==> You can refer to this demo: https://codeide.co/master/qVGVQyWG ==>您可以参考此演示： https : //codeide.co/master/qVGVQyWG

Answer 3

I choose to skip the tab component. 我选择跳过选项卡组件。 Mostly because it did not have back button support. 主要是因为它没有后退按钮支持。 Further it became tricky to navigate to ex: the 3:rd tab from another page. 此外，导航到ex：从另一页开始的3：rd标签变得棘手。 So I used simple routing instead. 所以我改用简单的路由。 ex: if there are 3 tabs I have 3 pages with specific routing. 例如：如果有3个标签，我有3个页面具有特定的路由。 To avoid duplicating tab menu I created a component that i put in all three pages. 为了避免重复选项卡菜单，我创建了一个放置在所有三个页面中的组件。

<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>

标签中的AngularJS引导HTML

问题描述

3 个解决方案

解决方案1
2 2017-02-12 20:53:53

解决方案2
0 2017-02-13 02:32:46

解决方案3
0 2017-02-13 13:37:51

标签中的AngularJS引导HTML

问题描述

3 个解决方案

解决方案1 2 2017-02-12 20:53:53

解决方案2 0 2017-02-13 02:32:46

解决方案3 0 2017-02-13 13:37:51

解决方案1
2 2017-02-12 20:53:53

解决方案2
0 2017-02-13 02:32:46

解决方案3
0 2017-02-13 13:37:51