编译HTML在角JS指令

我想建立以下指令的简单模式窗口谁的用法是如下：编译HTML在角JS指令

<modal content="<div class='error-text'>this is the content</div>"></modal>

哪些应该生成以下标记：

<div class="modal-wrap fade-hide fade-show" ng-show="showModal" ng-click="showModal=false"> 
    <div class="modal-info clearfix" ng-click="$event.stopPropagation()"> 

     <div class='error-text'>this is the content</div> 

     <button class="btn form-control" ng-click="showModal=false">OK</button> 
    </div> 
</div>

这是我的指令到目前为止：

.directive('modal', function($compile){ 
    return { 
     restrict: 'AE', 
     replace: true, 
     link: function(scope, element, attrs) { 
      scope.content = attrs.content; 
     }, 
     template: '<div class="modal-wrap fade-hide fade-show" ng-show="showModal" ng-click="showModal=false"><div class="modal-info clearfix" ng-click="$event.stopPropagation()">{{content}}<button class="btn form-control" ng-click="showModal=false">OK</button></div></div>', 
    }; 
})

我遇到的问题是t没有编译{{content}}。它被呈现为文字html。

我的模态窗口如下所示：

如何配置我的指令，使得content属性被编译为HTML？

来源

2017-05-28 yevg

在本示例中，我使用bootstrap作为我们的模态。

记住：在指令中您可以使用范围代替的Attr它好得多。

在你的指令结合HTML或在任何地方使用NG绑定，HTML，因为这样

的index.html

<modal content="<div class='alert alert-danger'>this is the content</div>"></modal>

modal.html

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
        </div> 
        <div class="modal-body" ng-bind-html="content | trust"> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-primary">Save changes</button> 
        </div> 
       </div> 
      </div> 
     </div>

过滤

此过滤器可帮助您绑定HTML作为信任的代码，我们用它在modal.html上NG绑定，HTML属性。

app.filter("trust", ['$sce', function ($sce) { 
    return function (htmlCode) { 
     return $sce.trustAsHtml(htmlCode); 
    } 
}]);

指令

app.directive('modal', function() { 
    return { 
     restrict: 'AE', 
     templateUrl: "modal.html", 
     scope: { 
      content: "@" 
     }, 
     link: function (scope, element, attrs) { 
      $('#myModal').modal('show'); 
     } 
    }; 
});

来源

2017-05-28 04:54:19 Maher

编译HTML在角JS指令

回答

相关问题