javascript – ng-bind-html与UI Bootstrap指令

2019-06-24 00:18:45 阅读：150 来源： 互联网

标签：javascript angularjs angularjs-directive angular-ui-bootstrap

我认为这不是直接问题,但我不知道如何做到这一点.我正在尝试动态加载使用UI Bootstrap指令的内容,但是当内容加载时,UI Bootsrap组件不起作用.更具体,工具提示不起作用.这是重要的代码：

<div ng-bind-html="trustSnippet(f.field.contentAfter)"></div>

javascript

$scope.trustSnippet = function(snippet) {
          return $sce.trustAsHtml(snippet);
};

我试图注入的HTML是：

<i class="fa fa-exclamation-circle" tooltip-placement="right" tooltip="On the Right!"></i>

有线索吗？

解决方法:

这是因为ng-bind-html不会编译插入的元素,因此UI Bootstrap指令 – 或任何其他指令或表达式 – 都不起作用.

如果您从特定位置获取HTML,则只需使用ng-include即可.

对于静态位置：

<div ng-include="'path/to/html'"></div>

或者,如果位置是动态的并存储在范围公开的变量中：$scope.path =“path / to / html”;：

<div ng-include="path"></div>

否则,如果动态生成或导入带有Angular表达式/指令的HTML本身(一种罕见的情况,这应该让您重新检查您的设计以确保您没有冒犯任何最佳实践),您需要使用它来编译它$compile服务,使用指令更好：

app.directive("ngBindHtmlCompile", function($compile, $sce){
  return {
    restrict: "A",
    link: function(scope, element, attrs){
      scope.$watch($sce.parseAsHtml(attrs.ngBindHtmlCompile), function(html){
        var el = angular.element("<div>").html(html);
        element.empty();
        element.append(el.children());
        $compile(element.contents())(scope);
      })
    }
  };
});

不要忘记添加“ngSanitize”作为依赖项.用法是：

<div ng-bind-html-compile="html"></div>

标签：javascript,angularjs,angularjs-directive,angular-ui-bootstrap
来源： https://codeday.me/bug/20190623/1275565.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – ng-bind-html与UI Bootstrap指令