AngularJS : Nested Directives and Scope Inheritance

Question

preamble: It seems like this question has been asked and answered before, but I cannot seem to get it working, so if my question boils down to "can you debug my code?", I apologize.

---

I would like to write the following code:

<radio-set ng-model="obj.prop" name="obj_prop">
    <radio-set-button ng-value="'public'">Public</radio-set-button>
    <radio-set-button ng-value="'protected'">Protected</radio-set-button>
    <radio-set-button ng-value="'private'">Private</radio-set-button>
</radio-set>

This renders a bunch of radio buttons and labels which need to populate whatever is passed to the <radio-set>'s ngModel. I'm missing something scope-related.

.directive("radioSet", function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '=?',
            ngChange: '&',
            name: '@'
        },
        transclude: true,
        template: '<div class="radio-set" ng-transclude></div>',
        controller: function () {}
    };
})
.directive("radioSetButton", function () {
    return {
        restrict: 'E',
        replace: true,
        require: ['^radioSet', '?ngModel'],
        scope: {
            ngModel: '=?', // provided by ^radioSet?
            ngValue: '=?',
            ngChange: '&', // provided by ^radioSet?
            name: '@'      // provided by ^radioSet?
        },
        transclude: true,
        link: function (scope, element, attr) {
            element.children().eq(0).attr("name", scope.name); // scope.name is null
        },
        template: '<label class="radio-set-button">' +
                    '<input type="radio" name="name" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
                    '<div class="radio-content" ng-transclude></div>' +
                  '</label>'
    };
})

Both the parent and child directives need their own scope definition, but it is unclear to me how to access to the radioSet's scope from within radioSetButton.

thanks for the help.

fiddle: http://jsfiddle.net/pmn4/XH5K2/2/

Answer 1

Transclusion

I guess i have to tell you that the transclusion you used in your directive does not work as you expect because in short: The transcluded directive doesn't inherit the scope you'd expect, actually it inherits the scope of the outer controller, but there are plenty of answers on this topic:

Access Parent Scope in Transcluded Directive

How to solve

To access a parents directive there are basically two ways:

1.) Require the parents directive's controller and create some API to do stuff on the parent

2.) Use the fifth parameter of the link function to access the transclude function, here you could change the injected scope and you could set it to the parents directive scope

Since the first solution is more intuitive i will go with this one:

On the radioSetdirective i set up a bidirectional databinding to the object in my Controller and i create a getter and setter method to interact with the value.

In the "child"'s directive i require the parent directive's controller which i get passed as the fourth parameter in my link function. I setup a click handler on the element to get the click and here i call the parents setter method with my value. To visualize the current selected object i add an ng-class directive which conditionally adds the active class.

Note: This way you can use the ngModel directive as well. It has an API to interact with the model.

The second solution uses the transclude function which you can use to pass in a scope. As i dont have time right now and as it adds more complexity i'd recommend using the first solution.

Recommendation

For your example transclusion might not be the right choice, use one directive and add the choices to the template or pass them into the directive. As i dont know what your intentions are i provided this solution. (I didn't know what the purpose of this name property is?)

The Code

Fiddle: http://jsfiddle.net/q3nUk/

Boilerplate:

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

app.controller('MainController', function($scope) {
    $scope.object = {
        'property' : 'public'
    };
});

The Directives:

app.directive('radioSet', function() {
    return {
        scope : {
            radioValue : '='
        },
        restrict : 'E',
        transclude : true,
        replace : true,
        template : '<div class="radioSet" ng-transclude></div>',
        controller : function($scope) {
            
            this.getRadioValue = function() {
                return $scope.radioValue;
            }
            
            this.setRadioValue = function(val) {
                $scope.$apply(function() {
                    $scope.radioValue = val
                });
            }
        }
    };
});

app.directive('radioSetButton', function() {
    return {
        restrict : 'E',
        transclude : true,
        replace : true,
        scope : true,
        template : '<div class="radioSetButton" ng-class="{active:isActive()}" ng-transclude></div>',
        require : '^radioSet',
        link : function(scope, elem, attrs, radioSetController, transclude) {
            scope.isActive = function() {
                return attrs.buttonValue === radioSetController.getRadioValue();
            };
            
            elem.on('click', function() {
                radioSetController.setRadioValue(attrs.buttonValue);
            });
        }
    };
});

The HTML:

<html>
<body ng-app="myApp">
    
    <div ng-controller="MainController">
        <p>{{ object.property }}</p>
        
        <radio-set radio-value="object.property">
            <radio-set-button button-value="public">Public</radio-set-button>
            <radio-set-button button-value="private">Private</radio-set-button>
            <radio-set-button button-value="protected">Protected</radio-set-button>
        </radio-set>
        
    </div>
    
</body>
</html>

CSS:

.radioSetButton {
    display : block;
    padding : 10px;
    border : 1px solid black;
    float : left;
}

.radioSetButton:hover {
    cursor : pointer;
}

.radioSetButton.active {
    background-color : grey;
}