Updated Plunker

Question

是否可以创建包含HTML内容的标签或将元素直接移动到内容？

这是我想要做的，最终，我想在选项卡内容中移动现有元素：

HTML

<body ng-controller="MainCtrl">
  <div class="container">
    <tabset ui-sortable="sortableOptions" ng-model="tabs">
      <tab class="tab" ng-repeat="tab in tabs" sortable-tab heading="{{tab.title}}">{{tab.content}}</tab>
    </tabset>

    <button type="button" ng-click="addSimple()">Add simple</button>
    <button type="button" ng-click="addHtml()">Add html</button>
    <button type="button" ng-click="addElement()">Add element</button>
    <button type="button" ng-click="removeTab()">Remove tab</button>
  </div>
</body>

JS

var app = angular.module('plunker', ['ui.bootstrap', 'ui.sortable']);

app.controller('MainCtrl', function($scope) {
  var count = 0;
  $scope.sortableOptions = {
    distance: 10,
    axis: 'x',
    update: function(event, ui) {
     // $scope.activeTab = ui.item.sortable.dropindex;
    }
  };
  $scope.tabs = [
    {title:'Test', content:'hello world'},
  ];
  $scope.addSimple = function() {
    count++;
    var newTab = {title: 'New tab ' + count, content: 'Works'};
    $scope.tabs.push(newTab);
  }
  $scope.addHtml = function() {
    count++;
    var newTab = {title: 'New tab ' + count, content: '<div>Broken</div>'};
    $scope.tabs.push(newTab);
  }
  $scope.addElement = function() {
    count++;
    var newTab = {title: 'New tab ' + count, content: angular.element('<div>Broken</div>')};
    $scope.tabs.push(newTab);
  }
  $scope.removeTab = function() {
    $scope.tabs.pop();
  }
});

Plunkr

Answer 1

它已被转换，但是如果要注入HTML，则必须使用ngBindHtml（需要ngSanitize作为依赖项）。

Updated Plunker

添加angular-sanitize.js确保将ngSanitize添加为依赖项：

var app = angular.module('plunker', ['ui.bootstrap', 'ui.sortable', 'ngSanitize']);

更改标记以添加ng-bind-html：

<tab class="tab" ng-repeat="tab in tabs" sortable-tab heading="{{tab.title}}">
  <div ng-bind-html="tab.content"></div>
</tab>

然后你可以直接传递html：

{title: 'New tab ' + count, content: '<strong>Works with <span class="red">ngBindHtml</span></strong>'}

或者，使用angular.element html（）方法来获取元素对象的html：

{title: 'New tab ' + count, content: angular.element('<div>Broken</div>').html()}

是否可以转换标签内容？

1 个答案:

Updated Plunker