Question

我创建了有角度的 responsiveButton 指令，用于调整按钮的宽度：

var app = angular.module('myApp', []);

app.directive('responsiveButton', function ($window) {
    return function (scope, element, attrs) {

        var handleMediaMatch = function (mql) {
            var smallButtonWidth = 170;
            var standartButtonWidth = 250;

            if (mql.matches) {
                element.removeClass('btn-xs');
                element.addClass('btn-block');
                element.removeAttr('style');
            } else {
                element.removeClass('btn-block');

                if (attrs.buttonSize == 'small') {
                    element.addClass('btn-xs');
                    element.css('min-width', smallButtonWidth + 'px');
                } else {
                    element.css('min-width', standartButtonWidth + 'px');
                }
            }
        };

        var mobileMaxWidth = 640;

        var mql = $window.matchMedia('(max-width: ' + mobileMaxWidth + 'px)');
        mql.addListener(handleMediaMatch);
        handleMediaMatch(mql);
    }
});

和html：

<button type="button" class="btn btn-info btn-xs" responsive-button button-size="small">Show Opening Hours</button>

jsfiddle.net/vfv74827

这里工作正常。

但我想在另一个 openingHours 指令中使用它：

var app = angular.module('myApp', []);

app.directive('openingHours', function () {
    return {
        restrict: 'E',
        template: '<button type="button" class="btn btn-info btn-xs" responsive-button button-size="{{ buttonSize }}">Show Opening Hours</button>',
        link: function (scope, element, attrs) {
            scope.buttonSize = attrs.buttonSize;
        }
    };
});

和html：

<opening-hours button-size="small"></opening-hours>

jsfiddle.net/7rqLxrso

在此示例中，它无法按预期工作。如果介质宽度超过640px，则按钮宽度必须为170px，而不是250 px，如本例所示。只有当您将屏幕宽度小于640px然后使其大于640px时，按钮宽度才会达到预期的170px。

请帮助解决这个问题。

Answer 1

我找到了解决方案。

必须在 responsiveButton 指令中添加scope.$watch(attrs.buttonSize, function () {...}：

jsfiddle.net/daslashi/7rqLxrso

现在工作正常。

Answer 2

Angular的链接功能是后链接功能。在您的情况下，responsiveButton的后链接首先在openingHours后链接功能之前运行。

此链接Order of execution of directive functions in AngularJS可以为您提供帮助。

嵌套角度指令

2 个答案: