Question

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

我很乐意使用它，但我需要IE8。

提前感谢您的帮助。

Answer 1

这是我使用的指令：

/**
 * Ui-messages is similar implementation of ng-messages from angular 1.3
 *
 * @author Umed Khudoiberdiev <info@zar.tj>
 */
angular.module('uiMessages', []).directive('uiMessages', function () {

    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {

            // hide all message elements
            var messageElements = element[0].querySelectorAll('[ui-message]');
            angular.forEach(messageElements, function(message) {
                message.style.display = 'none';
            });

            // watch when messages object change - change display state of the elements
            scope.$watchCollection(attrs.uiMessages, function(messages) {
                var oneElementAlreadyShowed = false;

                angular.forEach(messageElements, function(message) {
                    var uiMessage = angular.element(message).attr('ui-message');

                    if (!oneElementAlreadyShowed && messages[uiMessage] && messages[uiMessage] === true) {
                        message.style.display = 'block';
                        oneElementAlreadyShowed = true;
                    } else {
                        message.style.display = 'none';
                    }
                });
            });
        }
    };
});

我已使用ui-messages代替ng-messages来避免冲突。

<div ui-messages="form.name.$error">
    <div ui-message="minlength">too short</div>
    <div ui-message="required">this is required</div>
    <div ui-message="pattern">pattern dismatch</div>
</div>

Answer 2

我不确定叉子是否存在但是很容易推出自己的ng-message（或者用于相同目的的东西）。我认为以下情况会这样做：

<强>控制器

app.controller("Test", function ($scope) {
  $scope.messages = {
    "key1": "Message1",
    "key2": "Message2",
    "key3": "Message3"};

  $scope.getMessage = function (keyVariable) {
    return $scope.messages[keyVariable.toLowerCase()];
  };

  $scope.keyVariable = 'key1';
});

HTML（示例）

ENTER A KEY: <input type="text" ng-model="keyVariable" />
<h1 ng-bind="getMessage(keyVariable)" ng-show="getMessage(keyVariable) != ''"></h1>

See It Working (Plunker)

Answer 3

我已经更新了pleerock的答案来处理具有for和when属ngMessages和ngMessage属性的元素指令。您可以在此github repo

中找到相同的内容

＆＃13;

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');
          }
        });
      });
    }
  };
});

＆＃13;

<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>

＆＃13;

将ngMessages与Angular 1.2一起使用

3 个答案: