使用ng-bind-html时，角度制表符会中断

Question

I am using angular ui with bootstrap and angular-text module to build tabs builder 我正在使用带有引导程序和angular-text模块的angular ui来构建Tabs Builder
I am using the ng-bind-html to allow html in the tab content from angular-text module 我正在使用ng-bind-html允许angular-text模块的选项卡内容中的html
the problem is I got broken layout after doing that 问题是这样做后我的布局坏了
how I can solve this problem ? 我该如何解决这个问题？
here is the code 这是代码

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

Answer 1

ng-bind-html you have to parse tab content using $sanitize service like .. ng-bind-html，您必须使用$ sanitize服务（如..）来解析标签内容。

parse html content as trusted html for safe.. like 将html内容解析为受信任的html，以确保安全。

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

use trusted html in ng-bind-html ..like.. 在ng-bind-html ..like。中使用受信任的html

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

working..... 工作.....

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

try this... 尝试这个...

使用ng-bind-html时，角度制表符会中断

问题描述

1 个解决方案

解决方案1
0 2014-12-27 08:21:52

使用ng-bind-html时，角度制表符会中断

问题描述

1 个解决方案

解决方案1 0 2014-12-27 08:21:52

解决方案1
0 2014-12-27 08:21:52