Angular not compiling inside custom directive

Question

I have a directive that looks like this:

app.directive('fieldsetCollapse', function() {
return {
    restrict: 'A',
    scope: {},
    compile: function(tElement, tAttrs, transclude) {
        var wrapperElement = angular.element('<div ng-show="isOpen"></div>'),
            legendElement = tElement.find('legend'),
            collapsibleContent = tElement.children().not('legend'),
            toggleBtn = angular.element('<a href="#" class="twisty" ng-class="{ true: \'twisty-open\', false: \'twisty-closed\' }[isOpen]" ng-click="toggle()"></a>');

        legendElement.css('cursor', 'pointer')
                      .attr('ng-click', 'toggle()');

        tElement.css({
            'position': 'relative',
            'marginLeft': '20px'
        });
        tElement.prepend(toggleBtn);

        angular.forEach(collapsibleContent, function(obj, i) {
            $(obj).remove();
            wrapperElement.append(obj);
        });

        tElement.append(wrapperElement);

        return function(scope, element, attrs) {
            var directiveValue = (scope.$eval(attrs.gaigCollapsibleFieldset));
            scope.isOpen = (directiveValue == undefined) ? true : directiveValue;

            scope.toggle = function() {
                scope.isOpen = !scope.isOpen;
            }

        }
    }
}

});

Which works with this markup:

<fieldset fieldset-collapse> ... </fieldset>

If I try adding anything inside <fieldset> such as this:

<fieldset fieldset-collapse>{{foo}}</fieldset>

...where foo is defined on the scope of my controller, the output is

{{foo}}

Angular isn't compiling anything I add between my tag with the directive. Am I missing something to make this happen inside my directive?

jaime · Accepted Answer · 2012-10-26 16:06:41Z

2

You are creating an isolated scope in the directive definition object

return {
    restrict: 'A',
    scope: {} // <--- isolated scope
}

This means that your directive doesn't have access to the parent scope where the value of foo resides.

Just comment it out. Example http://jsfiddle.net/jaimem/RE7Jj/1/

If you don't want the directive to have full access to the parent scope you can set bidirectional binding between a local scope property foo and the parent's foo. More details in the docs: http://docs.angularjs.org/guide/directive

edited Oct 26, 2012 at 16:06

answered Oct 26, 2012 at 16:00

jaime

42k10 gold badges85 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dustin Over a year ago

I need $scope.isOpen to be isolated but the rest of the scope to not be isolated. Is there a way to do this?

Collectives™ on Stack Overflow

Angular not compiling inside custom directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related