我的 AngularJs 代码有问题[关闭]答案

【问题标题】：Something wrong with my AngularJs code [closed]我的 AngularJs 代码有问题[关闭]
【发布时间】：2017-12-06 15:47:36
【问题描述】：

我是 Angularjs 的新手，下面是我的代码，

<!DOCTYPE html>
<html>
    <head>
        <title>ng-Messages Service</title>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
        <script src="ng-messages.js"></script>
    </head>

    <body>

        <div ng-controller='thecontroller'>
            <form name="myForm">
            <label>
              Enter text:
              <input type="text" ng-model="field" name="myField" required minlength="5" />
            </label>
            <div ng-messages="myForm.myField.$error" role="alert">
              <div ng-message="required">You did not enter a field</div>
              <div ng-message="minlength, maxlength">
                Your email must be between 5 and 100 characters long
              </div>
            </div>
            </form>
        </div>
    </body>
</html>

下面是angularjs代码，

var myApp=angular.module('myApp',['ngMessages']);

myApp.controller('thecontroller',function($scope){
    $scope.name="Gopal";
});

我们没有得到正确的输出，我上面的代码有什么问题。

谢谢

【问题讨论】：

你期望的输出是什么？
什么是proper output？你有错误吗？如果有，有哪些错误？
确保您的问题包含这里的人员帮助您解决问题所需的所有信息：stackoverflow.com/help/mcve 否则您的问题将立即关闭。
为什么要对电子邮件而不是电子邮件进行最小长度和最大长度验证应该匹配电子邮件模式。你问我想错了没有意义。
哦！我忘了说 ng-app='myApp'，我现在有输出了。

标签： html angularjs model-view-controller

【解决方案1】：

你没有在你的 html 模板中提到ng-app="myApp"。

还要确保您引用了所需的 .js 文件。我假设这包括模块声明。

<script src="ng-messages.js"></script>

演示

var myApp=angular.module('myApp',['ngMessages']);

myApp.controller('thecontroller',function($scope){
    $scope.name="Gopal";
});

<!DOCTYPE html>
<html>
    <head>
        <title>ng-Messages Service</title>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
    </head>
    <body ng-app="myApp">

        <div ng-controller='thecontroller'>
            <form name="myForm">
            <label>
              Enter text:
              <input type="text" ng-model="field" name="myField" required minlength="5" />
            </label>
            <div ng-messages="myForm.myField.$error" role="alert">
              <div ng-message="required">You did not enter a field</div>
              <div ng-message="minlength, maxlength">
                Your email must be between 5 and 100 characters long
              </div>
            </div>
            </form>
        </div>
    </body>
</html>

【讨论】：

哦！我忘了说 ng-app='myApp'，我现在有输出了。

【解决方案2】：

You need to specify ng-app="your Module name" to bootstrap the application when index.html page start to load. It triggers the AngularJs life cycle automatically.
 Note- You may also specify the pattern for validating email that is email is valid or not
    <!DOCTYPE html>
        <html >
            <head>
                <title>ng-Messages Service</title>
                <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
                <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
                <script src="ng-messages.js"></script>
            </head>

            <body ng-app="myApp">

                <div ng-controller='thecontroller'>
                    <form name="myForm">
                    <label>
                      Enter text:
                      <input type="text" placeholder="abc@eyz.com" ng-model="field" name="myField"  data-ng-required="true" minlength="5" maxlength="100" ng-pattern="/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i"/>
                    </label>
                      <div data-ng-show="myForm.myField.$error.required">You did not enter a field</div>
                      <div data-ng-show="myForm.myField.$error.min 
                                                                || myForm.myField.$error.max">
                        Your email must be between 5 and 100 characters long
                      </div>
                      <div data-ng-show="myForm.myField.$error.pattern" >The email id is not valid</div
                    </form>
                </div>
            </body>
        </html>

【讨论】：