AngularJS：{{EXPRESSION}} 显示为 {{expression}} 而不是结果答案

【问题标题】：AngularJS: {{EXPRESSION}} displaying as {{expression}} instead of resultAngularJS：{{EXPRESSION}} 显示为 {{expression}} 而不是结果
【发布时间】：2017-12-01 17:56:52
【问题描述】：

已修复：感谢@Sajeetharan，我们发现表达式试图显示的函数 GenerateRef 已损坏并导致问题。

我知道这是一个相当常见的问题，但到目前为止，我对其他帖子或教程的关注未能解决我让 {{}} 显示结果的问题。

我正在尝试制作一个简单的网络应用程序来接收新请求。这是一个随机生成的 ID，然后显示在表格中，这就是我在表格中显示时遇到的问题。尽管遵循教程并尝试调试它，但我无法调试它，可能是因为我对 Angular 和 HTML 非常陌生。提前道歉。

angular.module('ReqWebApp', [])

pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
    $scope.GenerateRef = ["RF" + date.now()]
});

<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
    <meta charset="UTF-8">
    <title>New Request</title>
    <script src="../../app.js"></script>
    <script src="../../bower_components/angular/angular.js"></script>
</head>

<body ng-controller="ReqAppController">
    <p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
    <table border="1">
        <tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
        <tr><th>Producer :
            <select>
                <option>EXAMPLE</option>
                <option>EXAMPLE</option>
            </select></th> <th>Producer Site : <input type="text"></th>
        </tr>
    </table>
</body>
</html>

脚本位置应该为我在本地工作（我已经测试过），因为我正在使用 Bower 和 Node 来安装、维护和运行 AngularJS 和项目。到目前为止，我已经尝试根据不同的教程和 Stack Overflow 帖子以几种不同的方式设置 AJS 控制器，这是当前版本，因为它是我能找到的最新版本。

另外值得注意的是，我正在运行的代码对 sn-p 进行了一些编辑，一些拼写错误或其他错误可能是由于我将变量名称更改为在此处发布的结果。

感谢任何花时间阅读的人。

【问题讨论】：

标签： html angularjs web-applications

【解决方案1】：

你需要拥有它，

var pegasusWebApp = angular.module('ReqWebApp', [])

pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
    $scope.GenerateRef = ["RF" + date.now()]
});

您缺少声明部分。在加载 app.js 之前也应该加载角度参考

 <script src="../../bower_components/angular/angular.js"></script>
 <script src="../../app.js"></script>

演示

var pegasusWebApp = angular.module('ReqWebApp', [])

pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
    $scope.GenerateRef = ["RF" + new Date()]
});

<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
    <meta charset="UTF-8">
    <title>New Request</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 
</head>

<body ng-controller="ReqAppController">
    <p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
    <table border="1">
        <tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
        <tr><th>Producer :
            <select>
                <option>EXAMPLE</option>
                <option>EXAMPLE</option>
            </select></th> <th>Producer Site : <input type="text"></th>
        </tr>
    </table>
</body>
</html>

【讨论】：

感谢您的快速回复。但是，我已经进行了上述编辑，它仍然显示为 {{reqAppController.GenerateRef}}。
对不起。堆栈溢出的新手并尝试使用 enter 开始新行并提前发布。现在编辑。是否还有其他可能导致它的声音？也许我应该放弃 bower 的 AJS 并尝试强制覆盖到最新版本？
@ConnorBarthelmie 查看演示
非常感谢！您的“新日期（）”添加修复了它：）将标记为已回答。