Question

我一直在努力教自己JavaScript和AngularJS，所以请原谅任何愚蠢的错误，错误的术语或我可能完全以错误的方式接近这个事实。如果之前已经发布过一个解决方案，我也会道歉，但在无情地搜索之后我找不到任何东西。

我正在使用AngularJS将故事书整理为单页应用。通过索引计算进行动画制作的前几个div包含几行静态html，但读者可以通过单击四个按钮中的一个来选择故事将采用的四种路径之一。

为了实现这一点，我设置了四个JSON文件，这些文件将根据按钮点击动态加载。例如，如果读者点击巧克力冰淇淋按钮，那巧克力.json文件会加载，故事的其余部分将是巧克力冰淇淋。如果读者点击草莓冰淇淋按钮，草莓冰淇淋按钮加载，其余的故事是关于草莓冰淇淋等（我在这里简化了内容概念！）

这非常有效。至少对我来说，以JSON格式存储内容似乎是明智的。

然而，我希望在整个故事中包含一些变量，以使其对读者更加个性化。例如，也许他们的名字可以在整个叙述中被召回。

这是我遇到问题的地方。我的所有AngularJS表达式都完美地绑定在内容为非JSON的html文件中。但是，当然，由于我的大部分内容都来自外部JSON文件，我可以在这些内容中放置表达式吗？

例如，

在我的html AngularJS文本绑定表达式中，例如（简化）：

<p>{{readerName}}</p>

<p>{{myContent.intro}}</p>

完美地工作。从其中一个JSON文件中提取预期值或数据。

但是，如果我想在外部JSON文件中包含值，然后将其拉入，该怎么办？可以理解的是，下面的示例只会导致文本字符串，表达式不会评估。所以，字面上{{readerName}}，而不是我希望的约翰史密斯值。如何让表达式显示值？

[
{
    "textline"  : "Hey {{readerName}}, what's your favourite ice cream flavour",
    "answers"   : [
        { "id" : 0, "text" : "Chocolate" },
        { "id" : 1, "text" : "Chocolate chip" },
        { "id" : 2, "text" : "Double Chocolate" },
        { "id" : 3, "text" : "Dark Chocolate" }
    ],
    "feedback" : "That's a lot of chocolate {{readerName}}..."
},
{
    "textline" : "Hey {{readerName}}, what's your second favourite ice cream flavour",
    "answers"  : [
        {"id"  : 0, "text" : "Milk Chocolate" },
        {"id"  : 1, "text" : "Belgian Chocolate" },
        {"id"  : 2, "text" : "Death by Chocolate" },
        {"id"  : 3, "text" : "Rich Chocolate" }
    ],
    "feedback" : "That's even more chocolate {{readerName}}!"
}
]

提前感谢您的回答。我怀疑我接近这个错误的方式......

Answer 1

Angular不会插入它渲染的字符串的内部内容。但是，您可以定义为您完成工作的自定义过滤器，但语法会有点奇怪：

angular.module('demo', []).controller('DemoCtrl', function($scope) {
  $scope.readerName = 'John Smith';
  $scope.myContent = {intro: "Hey {{readerName}}, what's your favourite ice cream flavour"};
})

.filter('interpolate', function($interpolate) {
  return function(value, scope) {
    return $interpolate(value)(scope);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>

<div ng-app="demo" ng-controller="DemoCtrl">
  <p>{{readerName}}</p>
  <p>{{myContent.intro | interpolate:this}}</p>
</div>

部分interpolate:this表示：使用过滤器“interpolate”并将当前作用域（this）作为参数传递给其上下文中的字符串。

在JSON源数据中使用AngularJS表达式

1 个答案: