How to access transcluded child scope in nested AngularJS directives

Question

I have this directive agreementDialog that in turn uses the generic dialog directive myapp-dialog-window-modal:

angular.module('myapp.common.extra').directive('agreementDialog', function () {

    return {
        restrict: 'E',
        replace: true,
        template: '<div><myapp-dialog-window-modal window-title="Agreements" dialog-visible="agreementDialogVisible">'
                    + '<p>You need to accept the new terms.</p>'
                    + '<p><label><input type="checkbox" ng-model="variableInTranscludedChildScope"/>I accept the agreement</label></p>'
                    + '<p><button ng-click="submitAgreement(didAgree)">Submit</button></p>'
                + '</myapp-dialog-window-modal></div>',

        controller: function ($scope) {

            $scope.submitAgreement = function (didAgreeLocal) {
                console.log(`submitAgreement`, didAgreeLocal);
            };

            $scope.didAgree = false;
            $scope.agreementDialogVisible = true;

        }

    };
});

I need access to the variable variableInTranscludedChildScope mentioned in the code (the checkbox), but since it's inside the transcluded content, it has a separate scope (it's a child to agreementDialog’s scope and a sibling to myapp-dialog-window-modal’s scope). What's the best way of accessing it?

@PanosK What do you mean by bindings? I'd like to avoid events. — Tom Söderlund
– Tom Söderlund, Commented May 4, 2018 at 11:45

Petr Averyanov · Accepted Answer · 2018-05-04 10:52:53Z

1

ng-model="smth.variableInTranscludedChildScope"

controller: function ($scope) {
  $scope.smth = {};

  // you can access $scope.smth.variableInTranscludedChildScope here
}

answered May 4, 2018 at 10:52

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

How to access transcluded child scope in nested AngularJS directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related