Deimantas Deimantas - 2 months ago 6
Node.js Question

Angular returning it's own tags instead of output in ejs

I tried doing some input validation on my inputs at my ejs template using angular, but it doesn't seem to be working correctly, this is the code i used (from 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>


It's supposed to ouput something like this:

The input's valid state is: false


But instead it just returns this:

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


So is it in any way possible to use ejs and angular together?

Answer

You need to have a module and a controller defined, script should be loaded inside the 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>

Controller

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

 });

DEMO

Comments