Question

我尝试使用angular在我的ejs模板上对输入进行一些输入验证，但它似乎没有正常工作，这是我使用的代码（来自w3schools）：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

</body>
</html>

它应该输出这样的东西：

The input's valid state is: false

但它只是返回这个：

The input's valid state is: {{myForm.myInput.$valid}}

那么以任何可能的方式使用ejs和angular吗？

Answer 1

您需要定义一个模块和一个控制器，脚本应该加载到body / head

中

<强> HTML

  <!DOCTYPE html>
    <html ng-app="store">
    <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
      <script src="app.js"></script>
    </head>
    <body ng-app="">
        <form name="myForm">
          <input name="myInput" ng-model="myInput" required>
        </form>
        <p>The input's valid state is:</p>
        <h1>{{myForm.myInput.$valid}}</h1>
        </body>
    </html>

<强>控制器

 var app = angular.module('store', []);
 app.controller('StoreController', function($scope) {

 });

DEMO

Answer 2

<html ng-app="insert_app_name_here">

<body ng-controller="insert_controller_name_here">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
</body>
</html>

我会像上面的代码一样设置我的角度应用程序。此外，在身体标签的末尾包含脚本是一种很好的做法。此外，将.min从您的脚本标记移至angular.js而不是angular.min.js可帮助您更好地调试代码，因为您将使用它进行开发而不是用于生产。

在设置应用时，我会在app.js文件中加入代码如下：

angular.module('insert_app_name_here', [])

在设置控制器时，我会包含一个控制器文件（即mainCtrl.js），代码如下所示：

angular.module('insert_app_name_here').controller('insert_controller_name_here, function($scope) {

});

至于将角度与ejs联系起来，我对ejs不熟悉，因此我无法为此提供解决方案。

Angular返回它自己的标签而不是ejs中的输出

2 个答案: