Question

我正在学习AngularJS。我正在尝试创建一个自定义指令，实现带有页面的选项卡式笔记本。这是JSFiddle。

在标签2上，注意可以看到：＆＃34; [/ B]标签2＆＃34;的内容[B]。即

这是我尝试使用$ sce.trustAsHtml（）的指令的定义：

MyApp.directive('tmgTabsCtrl', ['$sce', function ($sce) {
return {
    restrict: 'E',
    require: '?tabControl',
    scope: {
        tabControl: '=',
    },
    template: '                                                                    \
    <BR>                                                                           \
    <ul class="nav nav-tabs">                                                      \
      <li ng-repeat="i in range(0, tabControl.Tabs.Count()-1)"                     \
        ng-class="{active: tabControl.IsSelected(i)}"                              \
        ng-click="alert(\'test\')" >                                               \
        <a href="#{{i}}"  ng-click="ToggleActive(i)">{{tabControl.TabName(i)}}</a> \
      </li>                                                                        \
    </ul>                                                                          \
    <div class="tab-content">                                                      \
      {{trustAsHtml(tabControl.TabContent()) }}                                    \
    </div>  ',

    link: function (scope, el, attrs) {
        scope.range = RangeFn;
        scope.ToggleActive = function (Index) {
            scope.tabControl.Select(Index);
        };
        scope.trustAsHtml = function (Html) {
            return $sce.trustAsHtml(Html);
        };
    }
};
}]);

我的最终目标是允许tabControl.Content（）函数返回带有HTML的文本各种HTML，包括其他自定义指令作为Web组件的一种形式。

我需要以某种方式$ compile（）文本吗？我做错了什么？

我已经尝试过审核StackOverflow链接的其他问题，但我无法找到问题的答案。

提前致谢。

Answer 1

我想出来了。我不知道为什么我的第一种方法不起作用，但下面的方法确实有效。

一般的想法是templateURL中的Html创建一个DOM元素，用于保存标签内容。当用户单击另一个选项卡时，将检索该元素，然后使用jquery的功能进行更改，例如： element.html（）函数。然后要求Angular扫描html并通过$ compile（element）（范围）使其交互。

希望这有助于某人。我仍然希望有人能解释为什么使用.trustAsHtml（）方法不起作用.....

MyApp.directive('tmgTabs', ['$sce', '$compile', '$timeout', function ($sce, $compile, $timeout) {
  var DirectiveObj = {
    restrict: 'E',                                                   
    require: '?tabControl',
    scope: {
      tabControl: '=',
    },                                   
    templateUrl: 'part/tab_part.html',
    link: function(scope, element, attrs){
      scope.range = RangeFn;
      scope.CompileContent = function(HtmlStr) {
        var el = $("#TMG-TAB-"+scope.tabControl.InstanceID+"-CONTENT"); //jquery object  
        el.html(HtmlStr);
        $compile(el)(scope);          
      };
      scope.DisplayContent = function() {
        scope.CompileContent(scope.tabControl.TabContent());
      };    
      scope.ToggleActive = function(Index){
        scope.tabControl.Select(Index);
        scope.DisplayContent();
      };
      $timeout(function() {              
        scope.ToggleActive(0); //needs to be done after link() finishes.
      });  
    }
  };               
  return DirectiveObj;    
}]);

这是tab_part.html

<BR>
<ul class="nav nav-tabs">
  <li ng-repeat="i in range(0, tabControl.Tabs.Count()-1)"
    ng-class="{active: tabControl.IsSelected(i)}" > 
    <a ng-click="ToggleActive(i)">{{tabControl.TabName(i)}}</a>
  </li>
</ul>
<span id={{"TMG-TAB-"+tabControl.InstanceID+"-CONTENT"}}>
 <!-- User content will be inserted here-->
</span>

这是一个使用示例。

<div ng-app="MyApp" ng-controller="MyAppController">  
  <tmg-tabs tab-control="DemoTabs"></tmg-tabs>
</div>

尽管$ sce.trustAsHtml（），Angularjs不信任自定义指令中的HTML

1 个答案: