Introduction to important directives in angular ($eval, $parse and $compile)

In angular service, there are some services you have to understand, because he can be said to be the core of Ng, and today, I would like to introduce Ng's two core services, $parse and $compile. In fact, these two services speak a lot of people, but 100 readers there are 100 hamlet, I am here to talk about their understanding of the two services.

People may doubt, $eval, in fact, he is not a service, he is within the scope of a method, and can not count services, and it is based on the parse, so can only be regarded as $parse of another way of writing, we look at the NG source code in the definition of $eval is how to know

   function (expr, locals) {        return $parse (expr) (This, locals);      },

I believe that after reading the source of the people understand it, well, now began to explain the two core services, if you feel I said the wrong words, welcome in the comment area or private chat point, so as to avoid the scourge of other readers.

When I talk about these two services, I want to start with a concept in this post: context

　　I believe that many people have heard this "context", but it may be a little vague, and I would like to explain to you here to see if we can accept this argument.

Remember angular's data binding? For example: I now have a controller called Testctrl, whose contents are as follows:

function ($scope) {       = "Boo!!!"     })

And in the HTML our code is like this

<ng-controller= "Testctrl">    {{test}}</  body>

Well, you don't have to think about the results, and the page will definitely show Boo!!! The words.

But what if I erase Ng-controller's instructions? That is, I did not in the HTML declaration controller, you directly bound {{test}}?

The result is only one, that is, the page is nothing (PS: Because you affirm the Ng-app). Do you understand this?

The controller is equivalent to a context container, the real context is actually $scope, when the page binding test, if the controller is declared, the current context is the controller inside the $scope,ng will go to find your controller context $scope there is no test, if there is, Of course he showed it, but when you don't declare the controller? His context container is Ng-app, then his real context is $rootscope, and this time he will look for $rootscope there is no test.

Well, the concept of context has been finished, in fact, very easy to understand, basically and this is very similar

So, then, we start talking about $parse, the first thing we're going to look at is Ng's API documentation

var getter = $parse (' user.name '); var setter = getter.assign; var context = {user:{name: ' Angular '}}; var locals = {user:{name: ' Local '}};expect (getter (context)). Toequal (' angular' newvalue ' ); expect (context.user.name). Toequal (' newvalue '); expect (getter (context, locals)). Toequal (' Local ');

What you see is a few lines of code in the NG document that are most cost-effective for $parse services.

Getter and setter are well-known get methods and set methods, context and locals is just a JSON object, the purpose is to simulate context relations

You can see the following four statements will eventually pass the test, now we analyze each one, analysis before I have to explain what is called $parse

$parse service is actually a function of parsing expression, just like ng-model= "test", you write this thing in HTML who know you ng-model= "test", in fact you want to bind is the current controller (context container) in the scope (context) The value in test, Ng is to help you parse the expression through the $parse service, so you need to pass the context object when invoking the $parse service, so that Ng knows where you are going to go to the scope (context) to find your test.

So we see that the first line of test code is this:

Getter (context)). Toequal (' angular ')//is actually $parse (' user.name ') (context)

In this context is the context, he can return "angular" the principle of the string is through these three steps:

1. Get the current expression User.Name

2. Get the current context object {user:{name: ' Angular '}}

3. Look for an expression in the top and bottom of the object, and finally get the "angular" character created

So this test code is successful.

Let's look at a second method setter method

Setter (context, ' newvalue ');//is actually $parse (' User.Name '). Assign (context, ' newvalue ')

Expect (Context.user.name). Toequal (' newvalue ');//The value of the test data context is changed

The setter method here is actually changing the way it's worth.

1. Get the current expression User.Name

2. Get the current context object {user:{name: ' Angular '}}

3. Change the value in the expression to program the context object {user:{name: ' NewValue '}}

The context object has changed and the getter method is used to get the expression, the context has been from {user:{name: ' Angular '}}--{user:{name: ' NewValue '}}, and the value of the last obtained expression is naturally " NewValue ", so the test code is also passed.

Expect (getter (context, locals)). Toequal (' local ');//actually $parse (' user.name ') (context, locals)

What you want to show here is the context substitution function.

In Getter's method we can not only select the first context, but if we pass the second argument, then the first context is overwritten by the second context , notice that it is overwritten.　　　　

1. Get the current expression User.Name

2. Get the current context object {user:{name: ' Angular '}}

3. Overwrite the current context {user:{name: ' Local '}}

4. Get the value of an expression after parsing

Back to $eval this place, we look at the $eval source code can be seen $eval only get function, and no set function, but sometimes we can choose to pass the second context, to achieve the modification is worth the effect.

Here $parse service will be finished, or that sentence

　　　　This post is original, if reproduced, please specify

Introduction to important instructions in angular ($eval, $parse and $compile)