如何创建一个指令来显示表单字段错误的工具提示？

Question

这是我的HTML：

<input id="email" type="text" name="email" class="form-control" ng-
model="user.email" required ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\[A-
Za-z]{2,4}$/" input-tooltip>

我的指示：

angular.module('app')
.directive('inputTooltip', function($timeout, $compile) {
    return {
        restrict: 'A',
        require: ['^form', 'ngModel'],
        link: function(scope, element, attrs, controllers) {

            var formCtrl = controllers[0],
                ngModelCtrl = controllers[1];

            function trigger() {
                $timeout(function() {
                    element.trigger('manual');
                }, 0);
            };

            var name = element[0].name;

            attrs.$set('tooltipTrigger', 'manual');
            attrs.$set('tooltipPlacement', 'top');
            attrs.$set('tooltipEnable', formCtrl.$name + '.' + name + '.$invalid');
            attrs.$set('tooltip', 'Invalid Email');

            ngModelCtrl.$viewChangeListeners.push(trigger);

            $compile(element.contents())(scope);
        }
    };
});

似乎创建了正确的HTML：

<input id="email" type="text" name="email" class="form-control ng-valid-
required ng-dirty ng-valid-parse ng-invalid ng-invalid-pattern ng-touched" ng-
model="user.email" required="" ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-
]+\.[A-Za-z]{2,4}$/" input-tooltip="" tooltip-trigger="manual" tooltip-
placement="top" tooltip-enable="form.email.$invalid" tooltip="Invalid Email">

属性存在且trigger（）函数在输入更改时运行，但不显示工具提示。

你发现我做错了什么或者做得更好 - 我觉得那里有一些菜鸟 - 请告诉我！

感谢。