从 JSON 文件中评估表达式答案

【问题标题】：Evaluate an expression from within a JSON file从 JSON 文件中评估表达式
【发布时间】：2015-05-03 01:57:07
【问题描述】：

我有一个 Angular 应用程序，其中数据通过 JSON 文件加载。对于各种对象，属性之一是“描述”。在我的应用程序中，我通过{{item.Description}} 将其弹出到我的 html 中。我的问题是 JSON 文件中的字符串具有需要根据变量进行调整的值。例如，“值为 160（每个变量 +20）”。我希望这个描述能读出所提供变量值的 160 加 20 倍。

很遗憾，我不能只将{{160+(20*var)}} 放在描述中，因为它只是将表达式打印为字符串。

是否可以在 Angular 中创建该绑定，以便根据其他变量动态更新？

更新根据要求，我将添加尽可能多的代码。

在我的文件头中，我包含一个 JSON 文件：

<script src="path/to/file.json"></script>

然后，我有我的控制器：

app.controller('itemController', function(){
    this.items = Items //Items is declared in the JSON file as the JSON object.
});

然后在我的 HTML 中调用：

<div ng-controller="itemController as ctrl">
    <span class="description" ng-repeat="item in ctrl.items">
        {{item.Description}}
    </span>
</div>

问题是，item.Description 有我想要评估的表达式。我通常只会做{{160+(20*ctrl.var)}}，但由于该表达式包含在item.Description 字符串中，Angular 不会正常评估它。

【问题讨论】：

你能分享一些代码吗？需求不是很清楚，看一些代码真的很有帮助。
@RocoCTZ 目前还没有相关代码。我所做的只是包含一个 JSON 文件，将其分配给一个变量，然后将其输出到文件中。我会用一些代码更新我的问题，但实际上什么都没有。

标签： javascript json angularjs

【解决方案1】：

看来您可以通过将 {{item.Description}} 替换为 {{$eval(item.Description)}} 来做到这一点，这会将字符串评估为 Angular 表达式。请参阅Angular docs for expressions 或a StackOverflow post about $eval。

编辑： OP 已澄清 item.Description 可能包含混合的 Angular 表达式和其他文本，例如 "The value is {{85 + 22 * ctrl.var}}"。幸运的是the Angular docs for $compile 包含一个解决这个问题的例子！这是一个简短的演示。

angular.module('app', [])
  .directive('compile', function($compile) {
    // directive factory creates a link function
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
           // watch the 'compile' expression for changes
          return scope.$eval(attrs.compile);
        },
        function(value) {
          // when the 'compile' expression changes
          // assign it into the current DOM
          element.html(value);

          // compile the new DOM and link it to the current
          // scope.
          // NOTE: we only compile .childNodes so that
          // we don't get into infinite loop compiling ourselves
          $compile(element.contents())(scope);
        }
      );
    };
  })
  .controller('itemController', function() {
    this.var = 5;
    this.items = [
      {Description: "What's 1+1? It's {{1+1}}"},
      {Description: "The value is {{85+22*ctrl.var}}"},
      {Description: "He{{'llo'}} World!"}
    ];
  });

body {
  font-family: sans-serif;
}
#main > span {
  background-color: #ddd;
  padding: 8px 16px;
  margin: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" class="ng-scope">
  <h1>Compile Test!</h1>
  <div ng-controller="itemController as ctrl" id="main">
    <span class="description ng-scope" ng-repeat="item in ctrl.items" compile="item.Description"></span>
  </div>
</body>

【讨论】：

当我尝试运行时，我得到一个错误：$parse:syntax Syntax Error。它不喜欢item.Description 中的{{。阅读链接后，我注意到提到了特殊语法，但找不到它...
你能不能不输出item.Description中的{{ }}？如果没有，您可以使用控制器内的循环手动删除它。
我已将 item.Description 更改为没有 {{ }}，所以我有 85+(22*var)，但从 85 开始仍然出现语法错误
我看到了问题。当我尝试在字符串上使用 $eval 时会产生错误，这就是 item.Description 的含义。我需要它来评估字符串中间的表达式。
不行，$eval应该是带字符串的……如果你把{{ 85 + (22 * var) }}直接放到body里面，能正常工作吗？