用例
我们当前的应用程序允许用户访问表单。在这种表单中，有多种表单元素，用户可以对其执行计算。当前的应用程序允许最终用户编写他们想要操作数据的任何 JavaScript。我们希望摆脱这种情况，因为最终用户可以操纵 DOM 并做各种讨厌的事情。这个想法是使用 Angular 模板来存储和执行计算。
要求最终用户应该能够使用以下方法创建计算:
- 通过
name属性可用的任何表单输入 - 所有标准运算符(+、/、%、- 等...)
Math和DateJavaScript 对象中的任何方法
示例
我目前有一个 working example ，但不会实时更新。当用户在绑定(bind)到模板的输入中输入公式时，计算不会出现在输出中。
例如，变量addition 可以是最终用户创建并从数据库中检索的公式。但是，对公式addition的更改也不会实时反射(reflect)。
代码
Angular 模板
<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>
JavaScript
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';
};
问题
- 可以使用 AngularJS 模板来利用该系统吗？
- 计算结果可以实时更新吗？
- 是否有更安全的方法来实现客户端生成的 JavaScript？ (我找到了
ADSafe，但需要对此进行更多调查)
最佳答案
将把评论提升为答案。不需要模板。您可以使用 $scope.$eval 实现您想要的效果。数学和日期函数也可以非常简单地添加。
http://plnkr.co/edit/IXSwCJpTf4g6iO6ynMrr?p=preview
<!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>
关于javascript - 使用 AngularJS 模板实现用户生成的 JavaScript 进行计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23070711/