Question

我已经创建了一个角度指令来处理错误消息的显示。它包含内置指令ng-messages＆amp; NG-消息进出口。（这样做的原因是创建自定义弹出错误消息控件）

为了实现这一点，我创建了一个跟踪错误消息的父控制器。它包含一个控制器，它有一个添加消息的方法，从子指令调用。

当我指定表格ng-messages = \＆＃34; myForm.myEmail。$ error \＆＃34;角色= \＆＃34;警报\＆＃34; ng-show = \＆＃34; myForm.myEmail。$ invalid＆amp;＆amp; myForm.myEmail $脏\＆＃34;在popoutValidation指令的指令模板中的根元素上。即对其进行硬编码以便映射到页面上的表单和元素，它可以正常工作并正确显示所需或无效电子邮件的错误消息。但是，当我尝试动态传递表单名称和控件时，它会停止工作。我有什么想法可以达到这个目的吗？

<ng-form name="myForm">
      <input type="email" name="myEmail2" ng-model="vm.name" required />
      <popout-validation position="left" form="myForm" for="myEmail2">
          <popout-validation-message type="required" message="This is requireddddd." />
         <popout-validation-message type="email" message="invalid email address." />
      </popout-validation>

   </ng-form>

以下代码：

var app = angular.module("app", ["ngMessages"]);

app.controller("myCtrl", function() {
   var vm = this;
   vm.name = "ee";
});

app.directive("popoutValidationMessage", function() {
   return {
      scope: {
         type: "@",
         message : "@"
      },

      require: "^popoutValidation",
      replace: true,
      link: function(scope, element, attr, ctrl) {
         ctrl.addMessage(attr.type, attr.message);
      }
   }
});

app.directive("popoutValidation", function() {
   return {
      require: "^form",
      replace: true,
      transclude: true,
      template: "<div class=\"error\" ng-messages>" +
         "<div ng-repeat=\"errorMessage in errorMessages\">" +
         "<div ng-message-exp=\"errorMessage.type\">{{ errorMessage.text }}</div>" +
         "</div>" +
         "<div ng-transclude></div>" +
         "</div>",
      compile: function(element, attr) {
         //ng-messages=\"myForm.myEmail.$error\" role=\"alert\" ng-show=\"myForm.myEmail.$invalid && myForm.myEmail.$dirty\"

         var formStr = attr.form + "." + attr.for;
         element.attr("ng-messages", formStr + "." + "$error");
         element.attr("ng-show", formStr + "." + "$invalid && " + formStr + "." + "$dirty");


      },
      controller: function($scope) {
         $scope.errorMessages = [];

         this.addMessage = function(type, message) {
            $scope.errorMessages.push({
               type: type,
               text: message
            });
         };
      }
   }
});

http://codepen.io/mantisimo/pen/ojbqoa?editors=101

Answer 1

有两种方法可以使用指令处理错误消息。

使用$ rootScope。当指令模板设置变量如{{$ root.msg}}时，则可以在控制器中设置$ rootScope.msg。当然，$ rootScope中的变量可以在指令中呈现。
更好的做法是没有范围污染。然后这种方式来了。首先创建这样的指令。

app.directive("toasterContainer", function($timeout, $compile, $sce, toaster) {
    return {
        replace: true,
        restrict: "E",
        scope: true,
        link: function(scope, elem, attrs) {
            scope.$on('toaster-newToast', function() {
                scope.toast = toaster.toast;
                $timeout(function() {
                    toaster.toast.display = false;
                }, toaster.toast.timeout);
            });
        },
        templateUrl: "/static/shop/snippets/toaster_container.html"
    }
});

然后创建像toaster这样的服务。

define([], function() {
    var toaster = function($timeout, $rootScope) {
        this.pop = function(type, msg, timeout) {
            var type = (typeof type === "undefined") ? "info" : type;
            var msg = (typeof msg === "undefined") ? "" : msg;
            var timeout = (typeof timeout === "undefined") ? 5000 : timeout;
            this.toast = {
                type: type,
                msg: msg,
                timeout: timeout,
                display: true
            }
            $rootScope.$broadcast('toaster-newToast');
        },
        this.initPop = function(type, msg, timeout) {
            var scope = this;
            $timeout(function() {
                scope.pop(type, msg, timeout);
            }, 300);
        }
    }
    toaster.$inject = ['$timeout', '$rootScope'];
    return toaster;
})

然后在控制器中，您可以简单地使用toaster服务来弹出这样的错误消息。

toaster.pop("success", msg);

Answer 2

修正了......只需要编译结果

compile: function(element, attr) {

         var formStr = attr.form + "." + attr.field;
         element.attr("ng-messages", formStr + "." + "$error");
         element.attr("ng-show", formStr + "." + "$invalid && " + formStr + "." + "$dirty");

         return {
            post : function(scope, element, attr, ctrl, transclude) {
               $compile(element)(scope);
            }
         }
      }

Angular指令包装ng-messages

2 个答案: