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

摘要由CSDN通过智能技术生成

用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</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

兰志辉yada

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Python中的exec、eval函数与作用域（scope）

MyCyber

07-18

5412

　　Python2与Python3的语法区别是引起了我对exec的注意，进而探讨一下python的命名空间(作用域) exec()函数　　exec()最有用的地方在于可以动态地创建代码字符串。然而，如果字符串是从其他地方获得的——很有可能是用户——那么几乎不能确定其中到底包含什么代码。所以为了安全起见，可以增加一个字典，起到命名空间的作用。例： # Python2版： from mat...

AngularJS 不得不了解的服务 $compile 用于动态显示html内容

mygrilzhuyulin的专栏

05-30

1823

项目中一度纠结与AngularJS如何动态显示不同的html内容。本来是希望直接使用下面的语句来实现： 1 div> div> 但是很尴尬的是，这样不能识别出html标签，而是直接将html里的页面标签全都显示出来了。这当然不是我想要的效果。谷哥了一番，没想到在官网上就找到了我想要实现的效果，而实现的主角就是今天的 $compile 服务。

参与评论您还未登录，请先登录后发表或查看评论

AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值

Alfred的博客

12-19

919

这篇文章主要介绍了AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve，其表格的表现方式是这样的：以上，变量colmnmap的值是事先定义在了Sco

AngularJS $compile动态生成html

weixin_30593443的博客

08-25

118

angular.module('app') .directive('compile', function ($compile) { return function (scope, element, attrs) { scope.$watch( function (scope) { ...

angularjs 动态加载指令------编译服务$compile

diaoman4889的博客

07-18

205

场景：我们写了一个自定义的指令，这条指令需要一些数据，而这些数据需要在某些操作之后才能就绪，这时候，我们就需要在数据就绪之后，动态加载指令。示例：　　js： $scope.$watch('report.reportTime', function (newVal, oldVal) { if (newVal !== oldVal) {...

angularJS 中$scope方法使用指南

10-24

在AngularJS中，$scope是控制器的载体，是模型和视图的连接点，负责传递数据和处理用户输入等。下面将详细说明如何在AngularJS中使用$scope方法。 ### $scope基本概念在AngularJS中，$scope是每个控制器的子作用...

详解在AngularJS的controller外部直接获取$scope

12-02

通常，我们应该使用AngularJS提供的服务，如`$timeout`或`$interval`，以及事件广播 `$rootScope.$broadcast` 和 `$scope.$on` 来实现跨组件的通信。然而，在没有源代码控制的情况下，这种“外挂”方式不失为一种...

基于angular中的重要指令详解($eval,$parse和$compile)

09-01

总结来说，$eval用于在当前Scope上下文中执行表达式，$parse解析Angular表达式并提供getter和setter方法，而$compile则负责编译包含Angular指令的HTML模板，使其能够响应Model变化。理解这三个概念对于深入掌握...

Angular中$compile源码分析

09-02

在AngularJS中，`$compile`服务是核心组件之一，负责将HTML模板转换为可执行的JavaScript代码，以便与Angular的双向数据绑定和指令系统协同工作。本文将深入探讨`$compile`服务的源码分析，帮助我们更好地理解其工作...

angularjs中的$eval方法

diejiankuai3444的博客

09-21

144

在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出，因为这个数字是动态的，这么输出肯定是不行的{{'a_' + '1'}}，因为输出来的是a_1这个字符串，而不是a_1这个变量的值想输出a_1这个变量的值，可以使用$eval方法：{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的...

AngularJS中使用$parse或$eval在运行时对Scope变量赋值

weixin_33997389的博客

01-08

248

在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve，其表格的表现方式是这样的： <table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: tru...

AngularJS内幕详解之 Scope

weixin_33725272的博客

06-08

216

2019独角兽企业重金招聘Python工程师标准>>> ...

angular $compile 编译html,AngularJS实现动态编译添加到dom中的方法

weixin_39531183的博客

06-10

253

本文实例讲述了AngularJS实现动态编译添加到dom中的方法。分享给大家供大家参考，具体如下：在使用angularjs 时，希望通过动态构建angular模版，再通过angular进行展示。使用方法如下：var app=angular.module("app",[]);app.controller('ctrl', ['$scope','$compile',function($scope,$c...

AngularJS的$scope

跟着BOSS有肉吃

12-17

286

$scope $scope是一个POJO（Plain Old Java Object） $scope提供了一些工具方法$watch()/$apply()，用来实时监测对象属性的变化，一般来说我们不会主动调用这些方法，它会在内部帮我们监控属性值的变化。 $scope是表达式的执行环境（或者叫作用域） $scope是一个树型结构，与DOM标签平行子$scope对象会继承父$scope上...

$compile

youhebuke225的博客

01-20

392

作用是一个编译函数，一般的话我们写的angular的组件指令等，在运行的时候angular就会自动进行编译但是在我们自己写组件的时候可能会用到手动编译，这个时候就会用到$compile函数了 $compile是一个高级函数，传入的参数为html模板，返回的为一个函数，返回函数的参数是html模板对应的scope 例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &lt

angular学习(一):动态模板总结

zhang6622056的专栏

11-19

5760

最近在项目中用到了angular,之前从未用到过此js lib库,由于项目也比较着急,学习的寥寥草草。到目前为止也只是学会皮毛而已,现将自己学习的知识总结如下: 备注1: 版本号：1.2.2 备注2: 本文将angular结合bootstrap做前端页面,逻辑处理。其中用到了ng的route,repeat,ng-option做下拉框等

angularjs 编译html,angularjs – 注入动态html似乎没有编译

weixin_36484814的博客

06-16

266

我正在尝试使用angularJS解决一个主要问题,即使用包含ng-controller的动态添加的html.让我们说我想在DOM中添加一个div作为ng-controller,它将绑定的数据脱离显示.我可以成功实现如下：var demoData = {'test1': 'one','test2': 'two'};var myApp = angular.module('myApp', []);myA...

AngularsJS中的$parse、$eval

书香水墨

03-17

205

一、$parse服务 $parse服务可以将一个表达式转换为一个函数。这个函数可以被调用，其中的参数是一个上下文对象，通常来说是作用域。另外，通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数，它可以用来在给定的上下文中改变这个表达式的值。 <div my-attr="obj.name" my-directive>testing</div> app.directive('myDirective',function($log, $pa