首先看看官方关于$parse的api $parse 作用:将一个AngularJS表达式转换成一个函数 Usage $parse(expression) arguments expression:需要被编译的AngularJS语句 returnsfunc(context, locals) context[object]:针对你要解析的语句,这个对象中含有你要解析的语句中的表达式(通常是一个scope object) locals[object]: 关于context中变量的本地变量,对于覆盖context中的变量值很有用。 返回的函数还有下面三个特性: literal[boolean]:表达式的顶节点是否是一个javascript字面量 constant[boolean]:表达式是否全部是由javascript的常量字面量组成 assign[func(context, local)]:可以用来在给定的上下文中修改表达式的值 简单说:$parse服务可以将一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。 另外,通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数,它可以用来在给定的上下文中改变这个表达式的值。 尝试应用这个服务 T1:在第一个例子中,我们先解析一个简单的表达式: 代码如下: <div ng-app="MyApp"> <div ng-controller="MyController"> <h1>{{ParsedValue}}</h1> </div> </div> angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ var context = { name: "dreamapple" }; // 因为这个解析的语句中含有我们想要解析的表达式, // 所以要把不相关的用引号引起来,整体然后用+连接 var expression = "'Hello ' + name"; var parseFunc = $parse(expression); $scope.ParsedValue = parseFunc(context); }); expression:是我们想要解析的表达式 context:就是一个解析表达的上下文环境(个人理解) parseFunc:就是解析以后返回的函数 我们还可以通过控制台来看看返还的函数的属性: angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ var context = { name: "dreamapple" }; // 因为这个解析的语句中含有我们想要解析的表达式, // 所以要把不相关的用引号引起来,整体然后用+连接 var expression = "'Hello ' + name"; var parseFunc = $parse(expression); //false console.log(parseFunc.literal); //false console.log(parseFunc.constant); //undefined console.log(parseFunc.assign); //hello console.log(parseFunc()); //function (self, locals) { // return fn(self, locals, left, right); // } console.log(parseFunc); $scope.ParsedValue = parseFunc(context); }); 从控制台我们可以知道,返还的parseFunc是一个函数,其中它的literal和constant属性都是false,而且parseFunc()返回的是没有加入函数运行上下文的值即"Hello"。 T2:在第二个例子中,我们来再次使用$parse服务,来解析一个输入框中的值: <div ng-app="MyApp"> <div ng-controller="MyController"> <input type="text" ng-model="expression" /> <div>{{ParsedValue}}</div> </div> </div> angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ $scope.$watch("expression", function(newValue, oldValue, context){ if(newValue !== oldValue){ var parseFunc = $parse(newValue); $scope.ParsedValue = parseFunc(context); } }); }); 我们使用$watch监测input输入框的变化,每当输入框中的表达式的值发生变化时,我们都会解析它,我们可以尝试向输入框中输入"1+1",然后就会看到下面显示2。 T3:我们会在第三个实例中比较深入地使用$parse服务 <div ng-app="MyApp"> <div ng-controller="MyController"> <div>{{ParsedValue}}</div> </div> </div> angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ $scope.context = { add: function(a, b){return a + b;}, mul: function(a, b){return a * b} } $scope.expression = "mul(a, add(b, c))"; $scope.data = { a: 3, b: 6, c: 9 }; var parseFunc = $parse($scope.expression); $scope.ParsedValue = parseFunc($scope.context, $scope.data); }); 我们可以看到结果是45,我们大致可以这样理解,$parse服务根据$scope.context中提供的上下文解析$scope.expression语句,然后使用$scope.data数据填充表达式中的变量注意,如果把$scope.expression中的c换成4,那么结果就是30,所以得到45结果。 T4:第四个实例是使用$parse服务获取和修改自定义指令中属性的值: <div my-attr="obj.name" my-directive>testing</div> app.directive('myDirective',function($log,$parse){ return function(scope,elem,attrs){ //解析"my-attr属性值到一个函数中" var model = $parse(attrs.myAttr); //model现在是一个函数,可以调用它来获取表达式的值 //下面这行代码将会输出作用域中obj.name的值 $log.log(model(scope)); elem.bind('click',function(){ //'model.assign'也是一个函数,它用来更新表达式的值 model.assign(scope,'New name'); scope.$apply(); }) } }); 上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name,那么我们完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括号并不管用。 转自:http://blog.csdn.net/feiying008/article/details/50222829 https://www.cnblogs.com/xujie520/p/5640850.html 股票“三不卖七不买“6字黄金口诀,只买井喷股 赢数百万身家! 南针信息 · 顶新 想对作者说点什么 浅谈AngularJS的$parse服务 这篇可以让你看明白 阅读数 4118 首先看看官方关于$parse的api$parse作用:将一个AngularJS表达式转换成一个函数Usage$parse(expression)argumentsexpression:需要被编译的An... 博文 来自: 飞鹰的专栏 angular.js $parse的用法demo 阅读数 638 《angular权威教程》中的$parse的用法Page20页中给了一个demo,无法运行出正确结果,后台也没有报错做了如下更改后,可正确运行,但目前无法确定自己的使用方法是否正确。仅供各位看官参考 ... 博文 来自: Lambert0320的博客 angular.js ng-repeat内方法参数问题$parse:syntax 阅读数 753 如图,在某项目开发时有个后台角色管理模块,需要遍历所有用户角色,并且为用户角色添加点击编辑事件,事件的参数为用户角色的ID但是在运行期间console会log出这样的错误经过阅读angularjs官方... 博文 来自: itkfdektxa的博客 angularjs-1.3代码学习-$parse 阅读数 239 这次我们来看一下angular的SandboxingAngularExpressions。关于内置方法的,核心有两块:Lexer和Parser。其中大家对$parse可能更了解一点。好了不多废话,先看... 博文 来自: liuyu5210的博客 $.parser.parse() 阅读数 4048 在JavaScript中一些dom元素是动态拼接上的easui的样式,由于页面已经渲染过了,所以需要手动执行渲染某个部件或者整个页面$.parser.parse();//渲染所有页面$.parser.... 博文 来自: Thinkingcao的博客 angularJS常见的报错 阅读数 569 Error:[ng:areq]找不到对应的ctrlError:[$injector:unpr]模块未能正确注入Error:[ngModel:nonassign]不是正确的ng-model表达式Erro... 博文 来自: miniminixu的博客 AngularJS常见报错总结