使用AngularJS模板为计算实现用户生成的JavaScript 用例_Javascript_Angularjs

使用AngularJS模板为计算实现用户生成的JavaScript 用例

javascript angularjs

使用AngularJS模板为计算实现用户生成的JavaScript 用例,javascript,angularjs,Javascript,Angularjs,我们当前的应用程序允许用户访问表单。在这个表单中，有多种表单元素，用户可以根据这些元素执行计算。当前应用程序允许最终用户编写他们想要操作数据的任何JavaScript。我们不想这样做，因为最终用户可以操纵DOM并做各种讨厌的事情。其思想是使用角度模板来存储和执行计算要求最终用户应能够使用以下方法创建计算：通过name属性提供的任何表单输入所有标准运算符（+、/、%、-，等等） Math和DateJavaScript对象中的任何方法例子我目前有一个，但它没有实时更新。当用户在绑定到模

我们当前的应用程序允许用户访问表单。在这个表单中，有多种表单元素，用户可以根据这些元素执行计算。当前应用程序允许最终用户编写他们想要操作数据的任何JavaScript。我们不想这样做，因为最终用户可以操纵DOM并做各种讨厌的事情。其思想是使用角度模板来存储和执行计算

要求最终用户应能够使用以下方法创建计算：

通过
```
name
```
属性提供的任何表单输入
所有标准运算符（+、/、%、-，等等）
```
Math
```
和
```
Date
```
JavaScript对象中的任何方法

例子我目前有一个，但它没有实时更新。当用户在绑定到

模板的输入中输入公式时，计算不会出现在输出中
例如，变量addition
可以是由最终用户创建并从数据库检索的公式。但是，对公式添加的更改也不会实时反映出来
代码
角模板
问题

可以使用AngularJS模板利用系统吗
计算可以实时更新吗
有没有更安全的方法来实现客户端生成的JavaScript？（我发现了ADSafe，但需要进一步调查）
将评论提升为答案。不需要模板。您可以使用$scope.$eval实现您想要的。也可以非常简单地添加数学和日期函数


{{test}}


{{ans}}
var-app=angular.module（“app”，[]）；
应用控制器（“测试”，功能（$范围）{
$scope.test=“hello world”；
$scope.Math=数学；
$scope.Date=函数（str）{
返回新日期（str）
}
/*RegExp（'[1-9]+'）。测试（b）*/
$scope.RegExp=函数（patternStr，标志）{
返回新的RegExp（patternStr，flags）；
}
$scope.eval=函数（v）{
var ans
试一试{
$scope.ans=$scope.$eval（v）；
}捕获（e）{}
}
});
引导（文档，[“应用程序]）；


让最终用户在数据上编写一个Angular表达式似乎更简单，您可以使用该文本作为表达式，并根据您的范围对其进行评估。不确定这是否是一个选项，但有了它，你的工作就几乎完成了。例如。。。不知道$eval函数。这很好，看起来绝对是个安全的方法。谢谢更新了我的原始答案以提供更好的日期支持，并添加了对正则表达式的支持。扩展此方法以支持您希望向用户提供的对象和函数的susbset非常简单。这应该放在wiki的某个地方。这绝对是一个非常有价值的模式。
<div ng-app="app" ng-controller="ctrl">
    <ng-form name="myForm">
        <label>
            <span>A:</span>
            <input type="number" name='a' ng-model="data.a" />
        </label>
        <label>
            <span>B:</span>
            <input type="number" name='b' ng-model="data.b" />
        </label>
        <label>
            <span>Template:</span>
            <input type="text" ng-model="template" />
        </label>
        <label>
            <span>Output of A+B:</span>
            <input type="output" ng-value="{{ addition }}" />
        </label>
        <label>
            <span>Output of {{ template }}:</span>
            <input typue="output" ng-value="{{ template }}" />
        </label>
    </ng-form>
</div>

var app = angular.module('app', []);

var ctrl = function($scope) {
    $scope.data = { a: 5, b: 6 };
    $scope.template = '';
    $scope.addition = 'myForm.a.$modelValue + myForm.b.$modelValue';
};

<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.16"   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

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

<p>
  <input ng-change="eval(expr)" ng-model="a"  type='number'/>
  <input ng-change="eval(expr)" ng-model="b"  type='number'/>
</p>

<textarea  ng-model="expr" ng-change="eval(expr)">
</textarea>

<span>{{ans}}</span>

<script>
  var app=angular.module("app",[]);
  app.controller("test",function($scope){
    $scope.test="hello world";

    $scope.Math = Math;

    $scope.Date=function(str){
      return new Date(str)
    }

    /*RegExp('[1-9]+').test(b)*/
    $scope.RegExp = function(patternStr,flags){
      return new RegExp(patternStr,flags);
    }

    $scope.eval =function(v){
      var ans 
      try{
      $scope.ans=$scope.$eval(v);
      }catch(e){}
    }
  });

  angular.bootstrap(document,["app"]);
</script>