$scope.eval in Angular 4

Question

Back when Angular was the thing, we used it to build an application for a client. To simplify it to the core, it's basically a dynamic system that allows an easy way to create questions and answers (even very complex ones), with display and valid conditions. Once no more questions are available, the system generates different offers that match the answers.

What allows it to be so dynamic is that we rely on $scope.$eval(). It made what was an ultracomplex application with new bugs when a new question was added a simple application that has been reliable for 3 years, with lots of upgrades and evolutions.

Now, I'm looking into Angular 4 to determine if there is an upgrade path that exists.

So if we have a questions that looks like this :

 { "id": "the_question", "answers: [{ "text": "yes", "value": true },{ "text": "no", "value": false }] }

and offers like this :

 [{ "id": "offer1", "condition": "session.answers.the_question == true" },{ "id": "offer2", "condition": "session.answers.the_question == false" }]

The system will tell us that offer1 is the proper one if user choosed "yes", or even propose multiple offers, and so on.

Thing is, in angular 4, $scope is dead, and $eval is gone with it.

So, is there anything in Angular 4 that would allow us the evaluate angular expressions at runtime against a specific object (I would even take experimental classes that might evolve in the future) ?

I had been looking into the Compiler class, but it seems to focus more on Component that more simple things.

so far, none. I'm in the process of actually extracting the $scope.$eval angularjs code to put that as an outside callable library. But as you might guess, it's covers quite a lot of code. I managed to get simple evaluation working, but as soon as it gets in complexity, I get undefined errors due to context issues. Should be working in a near future if I find time to finish it. — Sebastien F.
– Sebastien F., Commented Oct 13, 2017 at 6:03

Sebastien F. · Accepted Answer · 2017-10-13 15:49:08Z

1

Got it to work by extracting the appropriate code from angularjs unminified source file and keeping its structure. I used tslint to make sure every function required was present. That represented less than 50 function to copy/paste.

I had to rewrite the way the providers where used and used a light version of the original Scope class to get rid of what was not needed.

answered Oct 13, 2017 at 15:49

Sebastien F.

1,7512 gold badges25 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user636525 Over a year ago

Are you adding a github ?

Sebastien F. Over a year ago

I'm not sure how useful that would be. We are using angular 1.2.16 for a lot of bad "good reasons", so we are not even on par with the latest legacy one (which is 1.2.32 at the time I write this comment). Also, I just extracted the methods we need, others might need more code. If at some point there seems to be a lot of demands for that, I will consider the idea. In the meantime, you can find the extracted code here : gist.github.com/sebastien-f/480d1b7640539a3d14c0746ac4d5352b

Collectives™ on Stack Overflow

$scope.eval in Angular 4

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related