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); }); } }}); |
