Angular Tabs Break當使用ng-bind-html

我使用角度ui與引導程序和角度文本模塊來構建標籤生成器
我使用ng-bind-html允許從角度標籤內容中的html文本模塊
問題是我得到了破碎的佈局後，這樣做
我怎麼能解決這個問題？
這裏是代碼Angular Tabs Break當使用ng-bind-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>

來源

2014-02-05 Amr Gamal

NG綁定，HTML你必須分析使用$消毒服務像標籤內容..

解析HTML內容安全可信的HTML ..像

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

使用信任HTML NG綁定，HTML ..li柯..

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>

試試這個...

來源

2014-12-27 08:21:52

Angular Tabs Break當使用ng-bind-html

回答

相關問題