AngularJS带有HTML样式的内容显示的方法

就是随手记在这,没有特别深入的Angular学习经验,所以反正我是这么解决的。

farriorModule.directive('stringHtml' , function(){
  return function(scope , el , attr){
    if(attr.stringHtml){
      scope.$watch(attr.stringHtml , function(html){
        el.html(html || '');//更新html内容
      });
    }
  };
});

 调用的时候就这么写就行啦

<p string-html="content"></p>

 

转载于:https://www.cnblogs.com/DeanChiong/p/5035785.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS是一个流行的JavaScript框架,它允许开发人员使用MVC(模型-视图-控制器)模式来构建Web应用程序。在AngularJS中,动态添加HTML是通过指令来实现的。指令是一种特殊的AngularJS组件,它允许开发人员扩展HTML语法并创建可重用的组件。在这里,我们将介绍如何使用AngularJS指令来动态添加HTML。 首先,我们需要定义一个指令来动态添加HTML。在这个例子中,我们将使用名为“htmlDynamic”的指令。这个指令将接受一个表达式作为参数,该表达式将返回要添加的HTML内容。当表达式的值发生变化时,指令将更新元素的内容并编译新的HTML。 下面是一个示例代码,展示了如何使用AngularJS指令来动态添加HTML: var demo = angular.module('demoApp', [ 'ngSanitize' ]); demo.directive('htmlDynamic', function ($compile) { return { restrict: 'A', replace: true, link: function (scope, ele, attrs) { scope.$watch('isDomComplete', function (val) { if (val) { scope.$watch(attrs.htmlDynamic, function(html) { ele.html(html); $compile(ele.contents())(scope); }); } }); } }; }); 在这个例子中,我们定义了一个名为“htmlDynamic”的指令。这个指令使用$compile服务来编译新的HTML,并将其添加到元素中。当表达式的值发生变化时,指令将更新元素的内容并重新编译新的HTML。 为了使用这个指令,我们需要在HTML中添加一个元素,并将“htmlDynamic”指令添加到该元素中。下面是一个示例代码,展示了如何在HTML中使用“htmlDynamic”指令: <section ng-controller="DemoCtrl"> <div html-dynamic="content"></div> </section> 在这个例子中,我们将“htmlDynamic”指令添加到一个<div>元素中,并将表达式“content”作为参数传递给指令。当表达式的值发生变化时,指令将更新<div>元素的内容并重新编译新的HTML

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值