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/

As far as i understand you want to pass a value to the radio-set directive and the directive should display the radio-set-button as active if the value of the button equals the passed in value of the parents directive? — pfried
– pfried, Commented Jul 18, 2014 at 15:41
Yes, but also the other way: when a user clicks on a radio-set-button, obj.prop (the thing identified by radio-set's ngModel property) is set appropriately — Pat Newell
– Pat Newell, Commented Jul 18, 2014 at 15:50
is it necessary to use ngModel here? I think you overcomplicated the thing :D Can you explain why you chose such a complicated layout? Why the checkbox thing inside the directives? Is it intended for accessibility? — pfried
– pfried, Commented Jul 18, 2014 at 16:19
the intent: I originally had the radioButton which took care of the markup for the label, the input, and an icon (not shown), but I found that for each radio button, I had to set the model and the name. it was a lot of copy/pasting, so to make the code a little more DRY, I created the radioSet parent directive. Now I set the model and name only once for each group of radioSetButtons. (at least, that's the intent!) — Pat Newell
– Pat Newell, Commented Jul 18, 2014 at 16:28

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

Collectives™ on Stack Overflow

AngularJS : Nested Directives and Scope Inheritance

1 Answer 1

Transclusion

How to solve

Recommendation

The Code

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Transclusion

How to solve

Recommendation

The Code

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related