2015-11-06 80 views
0

我在互联网上搜索了很多,但我没有得到我的程序可行。所以,我选择我的问题stackoverflow。基本上我想在验证失败时显示验证错误消息。为此,我使用ngMessage指令使错误消息集中化,以便我可以轻松更新任何错误消息。但消息没有显示出来。这里是我的代码:AngularJS ng消息与ng消息包括不显示

Index.php 
<div class="alert alert-danger field-wrapper errors"> 
    <div ng-messages ="loginForm.email.$error"><div ng-messages-include="ng-errorMessages.php"></div></div> 
    <div ng-messages ="loginForm.password.$error"><div ng-messages-include="ng-errorMessages.php"></div></div> 
</div> 

这里是我的消息文件代码:

ng-errorMessages.php 
<div ng-messages for="loginForm.email.$error"> 
    <div ng-message ng-show="required">Email is required!</div> 
    <div ng-message ng-show="email">Email is not vang-messaged format!</div> 
</div> 
<div ng-messages for="loginForm.password.$error"> 
    <div ng-message ng-show="minlength">Password is too short!</div> 
    <div ng-message ng-show="maxlength">Password is too long</div> 
    <div ng-message ng-show="required">Password is required!</div> 
    <div ng-message ng-show="!required && passwordWeak">Password is weak!</div> 
</div> 

没有的问题是,没有显示出来。当我在铬检查元素我得到这个输出:

<div class="alert alert-danger field-wrapper errors"> 
     <div ng-messages="loginForm.email.$error" class="ng-inactive"><!-- ngMessagesInclude: ng-errorMessages.php --><div ng-messages="" for="loginForm.email.$error" class="ng-scope ng-inactive"> 
     <!-- ngMessage: --> 
     <!-- ngMessage: --> 
    </div> 
     <div ng-messages="" for="loginForm.password.$error" class="ng-scope ng-inactive"> 
      <!-- ngMessage: --> 
      <!-- ngMessage: --> 
      <!-- ngMessage: --> 
      <!-- ngMessage: --> 
     </div> 
    </div> 
    <div ng-messages="loginForm.password.$error" class="ng-inactive"><!-- ngMessagesInclude: ng-errorMessages.php --><div ng-messages="" for="loginForm.email.$error" class="ng-scope ng-inactive"> 
     <!-- ngMessage: --> 
     <!-- ngMessage: --> 
    </div> 
    <div ng-messages="" for="loginForm.password.$error" class="ng-scope ng-inactive"> 
     <!-- ngMessage: --> 
     <!-- ngMessage: --> 
     <!-- ngMessage: --> 
     <!-- ngMessage: --> 
    </div></div> 
</div> 

请朋友帮我。这里是Plunkr

回答

2

,这里是我的发现,请参阅本plunker

我在index.html文件改变了这部分

<div class="alert alert-danger field-wrapper errors"> 
    <div ng-messages="loginForm.email.$error"> 
    <div ng-messages-include="ng-errorMessages.html"></div> 
    </div> 
    <div ng-messages="loginForm.password.$error"> 
    <div ng-messages-include="ng-errorMessages.html"></div> 
    </div> 
</div> 

到:

<div class="alert alert-danger field-wrapper errors"> 
    <div ng-messages="loginForm.email.$error || loginForm.password.$error"> 
    <div ng-messages-include="ng-errorMessages.html"></div> 
    </div> 
</div> 

而且

<div ng-messages for="loginForm.email.$error"> 
    <div ng-message ng-show="required">Email is required!</div> 
    <div ng-message ng-show="email">Email is not vang-messaged format!</div> 
</div> 
<div ng-messages for="loginForm.password.$error"> 
    <div ng-message ng-show="minlength">Password is too short!</div> 
    <div ng-message ng-show="maxlength">Password is too long</div> 
    <div ng-message ng-show="required">Password is required!</div> 
    <div ng-message ng-show="!required && passwordWeak">Password is weak!</div> 
</div> 

到:

<div ng-messages for="loginForm.email.$error"> 
    <div ng-message="required">Email is required!</div> 
    <div ng-message="email">Email is not vang-messaged format!</div> 
</div> 
<div ng-messages for="loginForm.password.$error"> 
    <div ng-message="minlength">Password is too short!</div> 
    <div ng-message="maxlength">Password is too long</div> 
    <div ng-message="required">Password is required!</div> 
    <div ng-message="!required && passwordWeak">Password is weak!</div> 
</div> 

而且其做工精细用NG的消息,包括。

+0

是的,它工作。如果我想显示为ul li而不是做什么? – Mandy

+0

您能否详细说明,在ul> li中显示消息? –

+0

其实这些消息正在div内显示。我希望所有的信息都应该在李的一个ul下。 – Mandy