Executing javascript functions stored as string using AngularJS

Question

Is there any way to inject JavaScript code stored in a string in AngularJS controllers dynamically?

var dynamicJS = "function DoSomething(value){var x = 1+1  return 2;}"

I have to dynamically inject the above function into my AngularJS controller and have it be called on selection change of drop-down, the values of which are bound to the AngularJS controller. The reason is the JavaScript function would vary based on my each row of data which I have based on my configuration at an application level. I am aware we can make use of $eval but would like to get some better approaches, if any exist.

Can anyone give me any idea on this?

_{Note: I am using AngularJS v1.4.5}

Answer 1

There are multiple ways to achieve this.

• Function object

  Create a Function, passing the one argument (i.e. value) and functionBody as parameters:

  var dynamicJS = "var x = 1+1;  return 2;"
  var DoSomething = new Function("value", dynamicJS );
  

• eval()

  While arguably more dangerous¹, eval() can be used.

  var dynamicJS = "function DoSomething(value){var x = 1+1  return 2;}"\
  eval(dynamicJS);
  

  Because you mentioned in a comment

  "it is intranet application and not going to outer world. no issues on this for this req."

  this would likely be fine but please read the section below.

  Caution

  From the this section of the MDN documentation about eval():

  Don't use eval needlessly!

  _{eval() is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. More importantly, third party code can see the scope in which eval() was invoked, which can lead to possible attacks in ways to which the similar Function is not susceptible.}

  _{eval() is also generally slower than the alternatives, since it has to invoke the JS interpreter, while many other constructs are optimized by modern JS engines.}

  _{There are safer (and faster!) alternatives to eval() for common use-cases.} ²

See a demonstration of these techniques utilized below. Click on the buttons corresponding to each technique to see the output on the console.

var dynamicJS = "function DoSomething(value){var x = 1+1;  return 2;}"
var functionBody = "var x = 1+1;  return 2;";
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('eval').addEventListener('click', function() {
    eval(dynamicJS);
    console.log('DoSomething(3) -> ',DoSomething(3));
  });
  document.getElementById('function').addEventListener('click', function() {
    var dynamicFunction = new Function("value", functionBody);
    console.log('dynamic function(3) ->',dynamicFunction(3));
  });
});

<button id="eval">click to eval</button>
<button id="function">click to use Function</button>

---

¹_{https://stackoverflow.com/a/4599946/1575353}

²_{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Don't_use_eval_needlessly!}

Answer 2

I would believe the easier way will be to parse the String and then use the function constructor.

Something like this:

var DoSomething = new Function('value', 'var x = 1+1  return 2');

Answer 3

Perhaps try something like:

function myFunc(obj){
    var param = obj.hasOwnProperty('param') ? obj.param : undefined;
    console.log(param);
}

var funcString = "myFunc({ param: 'something' });",
    Construct = new Function(funcString);

Construct();

Haven't tested it to be honest ... but this way you avoid eval().

more info on Function object