How to use $ parse or $ eval in AngularJS to assign a value to the Scope variable at runtime? angularjss.pdf

Source: Internet
Author: User

How to use $ parse or $ eval in AngularJS to assign a value to the Scope variable at runtime? angularjss.pdf

In "AngularJS customizing Directive for a table", a Direcitve for a table is defined as follows:

<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>

Above, the value of the variable colmnmap is defined in Scope beforehand:

return {restrict: 'E',scope: {columnmap: '=',datasource: '='},link:link,template:template}; 

In AngularJSOne way to assign values to the Scope variable at runtime is to use the $ parse or $ eval method in the link function..

The presentation of Direcitve is consistent with the previous one:

<table-helper-with-parse datasource="customers" columnmap="[{name: 'Name'},...]"></table-helper-with-parse>

Directive is roughly like this:

Var tableHelperWithParse = function ($ parse) {var template = "", link = function (scope, element, attrs) {var headerCols = [], tableStart = '<table> ', tableEnd = '</table>', table = '', visibleProps = [], sortCol = null, sortDir = 1, columnmap = null; $ scope. $ watchCollection ('datasource ', render); // value columnmapcolumnmap = scope during runtime. $ eval (attrs. columnmap); // or columnmap = $ parse (attrs. columnmap) (); wireEvents (); function rener () {if (scope. datasource & scope. else se. length) {table + = tableStart; table + = renderHeader (); table + = renderRows () + tableEnd; renderTable () ;}}; return {restrict: 'E ', scope: {datasource: '='}, link: link, template: template} angular. module ('citcitvesmodule '). directive ('tablehelperwithparse', tableHelperWithParse );

Next we will introduce the differences between $ parse and $ eval.

First, both $ parse and $ eval are used to parse expressions, but $ parse exists as a separate service. $ Eval is used as the scope method.

$ Parse is typically used to set the value of a string expression mapped to a real object. You can also obtain the value corresponding to the expression from $ parse.

Var getter = $ parse ('user. name '); var setter = getter. assign; setter (scope, 'new name'); getter (context, locals) // input scope, return value setter (scope, 'new name ') // modify the attribute value mapped to the scope to 'new value'

$ Eval is scope. $ eval is the expression used to execute the current scope, such as scope. $ eval ('a + B '); in this case, a and B are from scope = {a: 2, B: 3 };

Let's look at the Source Code. Its implementation is

$eval: function(expr, locals) {return $parse(expr)(this, locals);},

It can be found that it is also based on $ parse, but its parameter has been fixed to this, which is the current scope, so $ eval is only encapsulated on the basis of $ parse, is a quick API for $ parse.

Articles you may be interested in:
  • Php exception: Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE eval () 'd code error
  • $ Scope method User Guide in angularJS
  • In-depth exploration of the Scope object supertutorial in AngularJS framework
  • AngularJS monitors Scope variables and calls Scope Methods externally

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.