angularjs – 将ngMessages与Angular 1.2一起使用

发布时间：2020-12-17 17:04:06 所属栏目：安全来源：网络整理

导读：有谁知道是否有支持ngMessages的Angular 1.2的分支？我很乐意使用它,但我对IE8有要求. 在此先感谢您的帮助. 解决方法我已经更新了pleerock的答案,以处理具有for和when等属性的元素指令,例如ngMessages和ngMessage.您可以在此 github repo中找到相同的内容

有谁知道是否有支持ngMessages的Angular 1.2的分支？

我很乐意使用它,但我对IE8有要求.

在此先感谢您的帮助.

解决方法

我已经更新了pleerock的答案,以处理具有for和when等属性的元素指令,例如ngMessages和ngMessage.您可以在此 github repo中找到相同的内容

angular.module('uiMessages',[]).directive('uiMessages',function() {

  return {
    restrict: 'EA',link: function(scope,element,attrs) {
      // hide all message elements
      var messageElements = element.find('ui-message,[ui-message]').css('display','none');
      // watch when messages object change - change display state of the elements
      scope.$watchCollection(attrs.uiMessages || attrs['for'],function(messages) {
        var oneElementAlreadyShowed = false;
        angular.forEach(messageElements,function(messageElement) {
          messageElement = angular.element(messageElement);
          var message = messageElement.attr('ui-message') || messageElement.attr('when');
          if (!oneElementAlreadyShowed && messages[message] && messages[message] === true) {
            messageElement.css('display','block');
            oneElementAlreadyShowed = true;
          } else {
            messageElement.css('display','none');
          }
        });
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<form name="userForm" ng-app="uiMessages" novalidate>
  <input type="text" name="firstname" ng-model="user.firstname" required />
  <ui-messages for="userForm.firstname.$error" ng-show="userForm.firstname.$dirty">
    <ui-message when="required">This field is mandatory</ui-message>
  </ui-messages>
  <br />
  <input type="text" name="lastname" ng-model="user.lastname" required />
  <div ui-messages="userForm.lastname.$error" ng-show="userForm.lastname.$dirty">
    <div ui-message="required">This field is mandatory</div>
  </div>
</form>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!