angularjs $compile服务及$scope.$eval实现html动态模板解析

最新推荐文章于 2022-01-20 09:29:12 发布

兰志辉yada

最新推荐文章于 2022-01-20 09:29:12 发布

阅读量1.4k

点赞数

分类专栏： angularjs 文章标签： angularjs $compile angularjs $eval angularjs 动态表单

本文链接：https://blog.csdn.net/qq_34065701/article/details/82151483

版权

angularjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在AngularJS中如何使用$compile服务和$scope.$eval来解析包含ng指令的HTML字符串，以实现在前端动态绑定数据库中的HTML内容，并确保ng-click等指令能够正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用angularjs时，有时我们往往要讲数据库中的html字符串动态绑定到前端页面中，此时直接ng-html,html中的ng相关的指令是不起作用的，常见的是ng-click，此时应该如何解决

需要用到

 1, $scope.$eval方法
 2  $compile服务

以上服务

$scope.$eval:angularjs $scope内置方法和$parse()服务一样，用解析字符串变量
例子：$scope.html='nihao';$scope.html2='html'  $scope.$eval('html2') //返回'nihao'*

$compile:angularjs内置的服务，接受一个需要编译字符串参数，变生成一个function，function要求传入一个scope,
 - 并通过此scope编译当前字符串模板
 - 例子：
 - $scope.html="<div ng-click='doSomeThing()'></div>"
 - var func=$compile(html);
 - var innerHtml=func($scope)//通过当前$scope编译字符串
 - 简写就是:var innerHtml=$compile(html)($scope);

//js代码
angular.module('myapp',[])
.controller('myctr',['$scope',functioni($scope){
   $scope.myHtml='<button ng-click='showMess()'></button>';//模板变量
   $scope.showMess=function(){ //测试点击事件方法
    alert('hahah')
}
}])
.directive('compile',function($compile){
   return{
     restrict:'AE',
     link:function(scope,el,attr){
        el.append($compile(scope.$eval(attr['compile']))(scope));//因为attr['compile']是一个字符串,所以用$eval编译一下
        scope.$watch(function(){//监听模板字符串是否改变，改变重新编译
        return scope.$eval(attr['compile'])
},function(){
                 //清空dom
                el.empty();
                //将编译后的模板插入到dom中
                el.append($compile(scope.$eval(attr['compile']))(scope));
        })
     }
}
})

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div compile='myHtml'>//指令宿主dom
</div>
</body>