使用案例

Question

使用案例

我们当前的应用程序允许用户访问表单。在这种形式中，存在各种表单元素，用户可以对其进行计算。当前的应用程序允许最终用户编写他们希望操纵数据的任何 JavaScript。我们希望摆脱这种情况，因为最终用户可以操纵DOM并做各种令人讨厌的事情。我们的想法是使用Angular模板来存储和执行计算。

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

通过name属性
所有标准运营商（+，/，％， - 等等......）
Math和Date JavaScript对象

实施例

我目前有一个working example，但它并没有实时更新。当用户在input template范围内输入公式时，计算不会显示在output中。

作为示例，变量addition可以是由最终用户创建并从数据库中检索的公式。但是，对公式addition的更改也未实时反映。

代码

角度模板

<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，但需要对此进行更多调查）

Answer 1

将评论提升为答案。不需要模板。你可以使用$ 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>

使用AngularJS模板实现用户生成的JavaScript以进行计算

使用案例

实施例

代码

角度模板

的JavaScript

问题

1 个答案: