当属性更改值时指令不运行链接功能 [英] Directive does not run link function when attribute changes value

问题描述

我创建了一个指令，用于将 qTip2 库封装到我的 angular 应用程序中(如 another SO 中所述问题).我有一个带有不同 qTip 配置的字典，并且根据我在属性 cv-tooltip 上传递的值，在链接函数的 .qtip 调用中传递了适当的配置.这适用于在 html 中设置的指令(例如，在右侧显示 qtip，在左侧显示 cv-tooltip="left").

I have created a directive for encapsulating qTip2 library into my angular application (as described in another SO question) . I have a dictionary with different configurations for qTip and depending on the value I pass on the attribute cv-tooltip the appropriate configuration is passed in the .qtip call in the link function. This works fine for directives that are set in html (eg. shows a qtip on the right and cv-tooltip="left" on the left).

当我从另一个指令将属性值从 cv-tooltip="right" 更改为 cv-tooltip="left" 时出现问题，当值更改时工具提示指令链接函数不会重新运行，因此qTip 未更新为正确的配置.

Problem arises when I change the value of the attribute from cv-tooltip="right" to cv-tooltip="left" from another directive, the tooltip directive link function does not re-run when the value changes and thus the qTip is not updated with the correct configuration.

qtip 指令如下所示:

qtip directive looks like this:

    mainApp.directive('cvTooltip', function () {
        var optionDictionary = {
            'right': {
                position: {
                    my: 'center left',
                    at: 'right center'
                },
                style: {
                    tip: {
                        corner: 'left center',
                        height: 10
                    }
                }
            },
            'left': {
                position: {
                    my: 'center right',
                    at: 'left center'
                },
                style: {
                    tip: {
                        corner: 'right center',
                        height: 10
                    }
                }
            }
        };


        return {
            restrict: 'A',
            scope: {
                positionType: '=cvTooltip'
            },
            link: function (scope, element, attrs) {

                var options = {
                    style: {
                        tip: {
                            width: 13
                        }
                    },
                    position: {
                        target: element
                    }
                };
                var defaults = optionDictionary[scope.positionType];
                $.extend(options, defaults);
                element.qtip('destroy');
                element.qtip(options);

            }
        }
    }
);

其他指令看起来像:

    mainApp.directive('cvErrorOnBlur', ['$compile', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        replace: true,
        link: function (scope, element, attributes, controller) {
            element.bind("blur", function () {
                if (controller.$dirty && controller.$invalid) {
                    element.addClass('error');
                    element.attr('cv-tooltip', 'left');

                } else {
                    element.removeClass('error');
                    element.attr('cv-tooltip', 'right');

                }
            });
        }
    }
}]);

在 html 中我使用它就像

In html I use it like

 <input type="text" cv-tooltip="right" cv-error-on-blur />

推荐答案

您必须使用 $observe 或 $watch 来监视对属性的更改，但必须对属性值进行插值 ({{}})

You would have to use $observe or $watch to monitor changes to the attribute, but the value of the attribute would have to be interpolated ({{}})

示例:

<input type="text" cv-tooltip="{{right}}" cv-error-on-blur />

attrs.$observe('cvTooltip', function(newValue, oldValue) {

});

你能把它改写成一个单一的指令吗?

Could you just rewrite it into a single directive?

mainApp.directive('cvTooltip', function () {
    var optionDictionary = {
        'right': {
            position: {
                my: 'center left',
                at: 'right center'
            },
            style: {
                tip: {
                    corner: 'left center',
                    height: 10
                }
            }
        },
        'left': {
            position: {
                my: 'center right',
                at: 'left center'
            },
            style: {
                tip: {
                    corner: 'right center',
                    height: 10
                }
            }
        }
    };


    return {
        restrict: 'A',
        require:"^ngController",
        link: function (scope, element, attrs, controller) {
            var initialValue = attrs.cvTooltip;
            console.log(initialValue);
            var options = {
                style: {
                    tip: {
                        width: 13
                    }
                },
                position: {
                    target: element
                }
            };
            if (controller.$dirty && controller.$invalid) {
                element.addClass('error');
                var defaults = optionDictionary['left'];
                $.extend(options, defaults);
                element.qtip('destroy');
                element.qtip(options);

            } else {
                element.removeClass('error');
                var defaults = optionDictionary['right'];
                $.extend(options, defaults);
                element.qtip('destroy');
                element.qtip(options);
            }
        }
    }

这篇关于当属性更改值时指令不运行链接功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！