angularjs中$parse的用法

转载自：https://umur.blog/2014/02/25/advanced-angular-parse/

高级Angular：$ parse

如果你想加强你的AngularJS知识，$ parse是你应该了解的最重要的服务之一。它被用于大多数指令中，为您提供了一系列新的可能性。

那么，它做了什么？让我们从一个众所周知的地方开始：ngClick。

ngClick指令，接受表达式，并在单击指令元素时执行表达式。那么，它在内部如何运作？是的，你猜对了：用$ parse。

$ parse接受一个表达式，并返回一个函数。当您使用上下文（稍后将详细介绍）作为第一个参数调用返回的函数时，它将使用给定的上下文执行表达式。

它将使用给定的上下文执行表达式。

就$ parse而言，Context是一个纯粹的javascript对象。表达式中的所有内容都将在此对象上运行。

让我们看一个例子：

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function MyService($parse) {   var context = {     author: { name: 'Umur'},     title: '$parse Service',     doSomething: function (something) {       alert(something);     }   };   var parsedAuthorNameFn = $parse('author.name');   var parsedTitleFn = $parse('title');   var parsedDoSomethingFn = $parse('doSomething(author.name)');     var authorName = parsedAuthorNameFn(context);   // = 'Umur'   var parsedTitle = parsedTitleFn(context);   // = '$parse Service'   var parsedDoSomething = parsedDoSomethingFn(context);   // shows you an alert 'Umur' }

所以这很酷，我们可以安全地评估带有上下文的字符串。让我们编写一个非常基本的myClick指令。

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15

angular.module('my-module', [])   .directive('myClick', function ($parse) {     return {       link: function (scope, elm, attrs) {         var onClick = $parse(attrs.myClick);         elm.on('click', function (e){           // The event originated outside of angular,           // We need to call $apply           scope.$apply(function () {             onClick(scope);           });         });       }     } });

看，纯javascript对象结果是我们的范围！

这有效，但是如果你看一下ngClick的文档，它就可以让我们向函数注入$ event对象。这是怎么发生的？这是因为解析的函数接受可选的第二个参数用于附加上下文。

我们可以在点击回调中访问事件对象，我们可以通过它。

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15

angular.module('my-module', [])   .directive('myClick', function ($parse) {     return {       link: function (scope, elm, attrs) {         var onClick = $parse(attrs.myClick);         elm.on('click', function (e){           // The event originated outside of angular,           // We need to call $apply           scope.$apply(function () {             onClick(scope, {$event: e});           });       });     }   } });

用法：

1 2	<a href=""    ng-click="doSomething($event.target)">link</a>

奖金

如果您不需要传递其他上下文，则可以保存一些字节并删除代码。这是一种更酷的方式。如何运作留给读者。如果您认为自己找到答案，请发表评论！

1 2 3 4 五 6 7 8 9 10 11

angular.module('my-module', [])   .directive('myClick', function ($parse) {     return {       link: function (scope, elm, attrs) {         var onClick = $parse(attrs.myClick);         elm.on('click', function (e) {           scope.$apply(onClick);         });       }     } });