尽管有$ scene . trustashhtml ()， Angularjs还是不信任自定义指令中的HTML

Angularjs not trusting HTML in custom directive despite $sce.trustAsHtml()

本文关键字：不信任 自定义 指令 HTML Angularjs scene trustashhtml      更新时间：2023-09-26

我正在学习AngularJS。我试图创建一个自定义指令，实现一个选项卡笔记本，与页面。这是在JSFiddle上。

http://jsfiddle.net/kdtop/rxuchg1t/

在标签2上，可以看到:"Content [B]for[/B]标签2"。即[B] [/B]标签不呈现。

这里是指令的定义，我尝试使用$ scene . trustashhtml (): 

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链接的其他问题，但我找不到我问题的答案。

我明白了。我不知道为什么我的第一个方法不起作用，但下面是一个有效的方法。

一般的想法是templateURL中的Html创建一个DOM元素来保存选项卡内容。当用户单击不同的选项卡时，该元素被检索，然后使用jquery的功能进行修改，例如element.html()函数。然后，Angular会被要求扫描html，并通过$compile(element)(scope)使其具有交互性。

希望这能帮助到别人。我仍然希望有人能解释为什么使用。trustashhtml()方法不工作.....

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>
相关文章：