AngularJS:{{EXPRESSION}}显示为{{expression}}而不是结果

时间:2017-06-28 11:35:49

标签: html angularjs web-applications

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

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

我正在尝试创建一个简单的Web应用程序来接受新请求。这是一个随机生成的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控制器,这是当前的再现,因为它是我能找到的最新版本。

另外值得注意的是,我正在运行的代码中对代码段进行了一些编辑,而且一些拼写错误或其他错误可能是我更改变量名称以便在此处发布的结果。

感谢任何人花时间阅读。

1 个答案:

答案 0 :(得分:0)

你需要把它作为,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <ul>
    <li class="small"><a href="#">Small</a></li>
    <li class="medium"><a href="#">Medium</a></li>
    <li class="large"><a href="#">Large</a></li>

  </ul>
</header>

<section id="data">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae accusamus molestias reprehenderit autem harum tenetur! Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio possimus nostrum, ducimus assumenda corrupti.</p>


</section>

你错过了声明部分。还应在加载app.js

之前加载角度引用
var pegasusWebApp = angular.module('ReqWebApp', [])

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

<强>样本

 <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()]
});