Question

我尝试为表单输入的值无效时创建一个简单的弹出式指示器。

现在，我有一个服务，它根据调用服务器的结果处理将表单值设置为无效：

var item = form[error.PropertyName];
item.$setValidity('error', false);
item.ErrorMessage = error.Message;

因此，在这些模型中，我设置了一个名为＆＃39; ErrorMessage＆＃39;是从服务器发送的任何东西。

要将该消息弹出，我已经创建了这个使用angular-ui bootstrap tooltip指令的指令：

myApp.directive('validationPopup', function ($compile) {
    return {
        restrict: 'A',
        priority: 10000,
        terminal: true,
        require: '^form',
        compile: function compile($element, $attrs) {
            delete ($attrs['validationPopup']);
            $element.removeAttr('validation-popup');

            $element.attr('tooltip', '{{ErrorMessage}}');
            $element.attr('tooltip-trigger', 'focus');

            return {
                pre: function (scope, element, attrs, formCtrl) { },
                post: function (scope, element, attrs, formCtrl) {
                    $compile(element)(scope);
                    scope.$watch(function () { return (formCtrl[attrs.name] == undefined) ? undefined : formCtrl[attrs.name].$invalid; }, function (invalid) {
                        if (invalid != undefined) {
                            scope.ErrorMessage = formCtrl[attrs.name].ErrorMessage || '';
                        }
                    });
                }
            };
        }
    };

由于我没有很多制作指令的经验，而且由于我在这里基本上拼凑了各种其他答案，我的问题是这是将其他指令添加到一个正确的方法。现有元素？它似乎工作正常;但是，我不确定我是否会遇到问题（或性能问题）。

AngularJS：通过指令添加其他指令

0 个答案: