Nested angular directives

Question

I have created angular responsiveButton directive, which adjusts the width of the button:

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);
    }
});

And html:

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

jsfiddle.net/vfv74827

It works fine here.

But I want to use it inside another openingHours directive:

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;
        }
    };
});

And html:

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

jsfiddle.net/7rqLxrso

And in this example it doesn't work as expected. If the media width is more than 640px, the button width has to be 170px, but not 250 px as in this example. And only when you make screen width smaller than 640px and then make it larger than 640px the button width became 170px as expected.

Please, help to fix this problem.

@RazvanBalosin Set the jsfiddle result window width to 641px or more. When you run the app in the first exaple button width is 170px as excepted, but in the second one is 250px. — daslashi, Aug 04 '15 at 13:10

score 0 · Accepted Answer · answered Aug 04 '15 at 14:47

0

I found the solution.

It was necessary to add scope.$watch(attrs.buttonSize, function () {...} inside the responsiveButton directive:

jsfiddle.net/daslashi/7rqLxrso

Now it works fine.

answered Aug 04 '15 at 14:47

daslashi

357
1
3
13

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

Angular's link function is post-link function. In your case, responsiveButton's post-link runs first before openingHours post-link function.

this link Order of execution of directive functions in AngularJS can help you.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 04 '15 at 15:53

gzc

8,180
8
42
62

Nested angular directives

2 Answers2