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

转载于:https://www.cnblogs.com/bagexiaowenti/p/9548104.html