獲取AngularJS指令中的模板元素

Question

我正在使用AngularJS，我想創建一個僅在用戶注冊后才執行操作的按鈕。 如果未注冊用戶，則會打開帶有特定消息的注冊工具提示。 這是按鈕標記：

<button signup-tooltip="submitForm()" signup-message="Please sign in to submit the form">submit form</button>

注冊工具提示模板如下所示：

<div class="signup-tooltip-view">
    ....Many elements
    ....
</div>

重要的是，注冊工具提示必須在按鈕上方打開。
我的signupTooltip看起來像這樣：

module.directive('signupTooltip', function() {
    return {
        scope: {
            action: '&signupTooltip',
            message: '@signupMessage'
        },
        templateUrl: 'path/to/signup/tooltip.html',
        link: function(scope, element, attrs) {
            function calculatePosition() {
                // This method calculates the position of the tooltip (above element)
                var top, left;
                ....
                ....
                ....
                return {
                    top: top,
                    left: left
                };
            }

            element.click(function() {
                if (user.isRegistered) {
                    scope.action();
                } else {
                    var tooltipPosition = calculatePosition();

                    // Here I need a reference for the template element <------PROBLEM
                    var tooltipTemplate = ..... HOW TO GET THE TOOLTIP ELEMENT

                    tooltipTemplate
                        .appendTo(element.parent())
                        .css(tooltipPosition);
                }
            });
        }
    };
});

在指令內部，我需要已編譯元素（從中創建元素）的引用。 我如何獲得它（請記住我需要signupMessage與模板一起編譯）？
這種用例（工具提示）的成角度方式是什么？

Answer 1

您應該更多地使用框架，而不是圍繞框架。

這是做事的“角度方式”：

JS：

var template = '<button ng-click="onClick()">submit form</button>\
<div class="signup-tooltip-view" ng-bind="message" ng-show="!!position" style="top:{{ top }}px;left: {{ left }}px">';

module.directive('signupTooltip', function() {
    return {
        restrict: 'E',
        scope: {
            action: '&',
            message: '@'
        },
        template: template,
        link: function(scope, element, attrs) {
            function calculatePosition() {
                // This method calculates the position of the tooltip
                var top, left;
                return {
                    top: top,
                    left: left
                };
            }

            scope.onClick = function() {
                if (user.isRegistered) {
                    scope.action();
                } else {
                    scope.position = calculatePosition();
                }
            };
        }
    };
});

當然，您可以將模板放在單獨的文件中，並使用templateUrl屬性引用它，而不是提供字符串。

HTML：

<signup-tooltip action="submitForm()" message="Please sign in to submit the form">

這是jsFiddle-demo

Answer 2

請記住， element引用了您的指令，應該這樣做（使用jQuery的find函數）：

var tooltipTemplate = element.find(".signup-tooltip-view");

如果僅使用angular的jqLit​​e，則必須使用children()方法，因為它不支持find類。 當然，您始終可以通過遍歷其childNode來使用普通JS來選擇它。