在动态标签动态内容（角，UI引导） [英] Dynamic Content in Dynamic Tab (Angular, UI Bootstrap)

问题描述

我想用NG-包括使用AngularJs和动态生成选项卡的内容UI引导。

I'd like to use ng-include in the content of a dynamically generated tab using AngularJs and UI Bootstrap.

我有一个Plunker在这里：
http://plnkr.co/edit/2mpbovsu2eDrUdu8t7SM?p=$p$pview

I have a Plunker here: http://plnkr.co/edit/2mpbovsu2eDrUdu8t7SM?p=preview

<div id="mainCntr" style="padding: 20px;">
  <uib-tabset>
    <uib-tab ng-repeat="tab in tabs" active="tab.active" disable="tab.disabled">
      <uib-tab-heading>
        {{tab.title}} <i class="glyphicon glyphicon-remove-sign" ng-click="removeTab($index)"></i>
      </uib-tab-heading>
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
</div>

JS code：

JS Code:

$scope.addTab = function() {
    var len = $scope.tabs.length + 1;
    var numLbl = '' + ((len > 9) ? '' : '0') + String(len);

    var mrkUp = '<div>' +
        '<h1>New Tab ' + numLbl + ' {{foo}}</h1>' + 
        '<div ng-include="tab.tabUrl" class="ng-scope"></div>' +
        '</div>';

    $scope.tabs.push({title: 'Tab ' + numLbl, content: $compile(angular.element(mrkUp))($scope)});
}

在Plunker，点击添加标签按钮。它要求在$范围函数，将一个新标签的集合，但在经过一些动态生成的内容，其中包括一个NG-include指令。预期的输出是，NG-包括将标签内容区域内显示。

In the Plunker, click the "Add Tab" button. It calls a function in $scope that pushes a new tab to the collection but passing in some dynamically generated content that includes a ng-include directive. The expected output is that the ng-include will be displayed inside of the tab content area.

感谢

推荐答案

在您的Plunker您使用 NG-绑定-HTML 不编译HTML你。您可以创建一个新的指令，这是否适合你。

In your Plunker you are using ng-bind-html which doesn't compile the HTML for you. You can create a new directive that does that for you.

来源$ C ​​$ C为 NG-绑定-HTML ：

Source code for ng-bind-html:

var ngBindHtmlDirective = ['$sce', '$parse', '$compile', function($sce, $parse, $compile) {
  return {
    restrict: 'A',
    compile: function ngBindHtmlCompile(tElement, tAttrs) {
      var ngBindHtmlGetter = $parse(tAttrs.ngBindHtml);
      var ngBindHtmlWatch = $parse(tAttrs.ngBindHtml, function getStringValue(value) {
        return (value || '').toString();
      });
      $compile.$$addBindingClass(tElement);

      return function ngBindHtmlLink(scope, element, attr) {
        $compile.$$addBindingInfo(element, attr.ngBindHtml);

        scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {
          // we re-evaluate the expr because we want a TrustedValueHolderType
          // for $sce, not a string
          element.html($sce.getTrustedHtml(ngBindHtmlGetter(scope)) || '');
        });
      };
    }
  };
}];

有关新指令选择一个名称，例如编译HTML 。

Pick a name for the new directive, for example compile-html.

替换 tAttrs.ngBindHtml 与 tAttrs.compileHtml （或您选择的任何名称）。

Replace tAttrs.ngBindHtml with tAttrs.compileHtml (or whatever name you picked).

您需要更换 $ sce.getTrustedHtml 与 $ sce.trustAsHtml ，或者您将获得错误：[$ SCE：不安全的。试图在安全的情况下使用不安全的值

You need to replace $sce.getTrustedHtml with $sce.trustAsHtml, or you will get Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

然后，你需要调用 $编译：

$compile(element.contents())(scope);

完整指令：

app.directive('compileHtml', ['$sce', '$parse', '$compile',
  function($sce, $parse, $compile) {
    return {
      restrict: 'A',
      compile: function ngBindHtmlCompile(tElement, tAttrs) {
        var ngBindHtmlGetter = $parse(tAttrs.compileHtml);
        var ngBindHtmlWatch = $parse(tAttrs.compileHtml, function getStringValue(value) {
          return (value || '').toString();
        });
        $compile.$$addBindingClass(tElement);

        return function ngBindHtmlLink(scope, element, attr) {
          $compile.$$addBindingInfo(element, attr.compileHtml);

          scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {

            element.html($sce.trustAsHtml(ngBindHtmlGetter(scope)) || '');
            $compile(element.contents())(scope);
          });
        };
      }
    };
  }
]);

用法：

<div compile-html="tab.content"></div>

演示： http://plnkr.co/编辑/ TRYAaxeEPMTAay6rqEXp？p = preVIEW

这篇关于在动态标签动态内容（角，UI引导）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！