Can not access object defined in controller from within directive with isolate scope

Question

I have a wizard component that has three directives.

Sliding Panel: normal scope

Sliding Panel Step: isolate scope

Sliding Panel Controls: isolate scope

My issue is that I cannot access an object defined on the page controller from within the Sliding Panel Step, which has isolate scope.

Within the page, I have this controller set up:

<script>
function Controller($scope, yoSlidingPanelService) {

    //model to save data
    $scope.selections = {
        "list_name": '',
        "selectedCriteria": []
    }

    $scope.list = {
        "name": 'Example List'
    };

    $scope.isCriteriaSelected = false;

    $scope.test = yoSlidingPanelService.returnCopy();

    // toggle selection for a given fruit by name
    $scope.toggleSelection = function toggleSelection(criteria) {
        var idx = $scope.selections.selectedCriteria.indexOf(criteria);
        // is currently selected
        if (idx > -1) {
            $scope.selections.selectedCriteria.splice(idx, 1);
        }
        // is newly selected
        else {
            $scope.selections.selectedCriteria.push(criteria);

        }

    };

    $scope.submit = function() {
        $scope.selections.list_name = $scope.list.name;
        console.log($scope.list.name + " saved!")
        console.log($scope.selections)
        //if ($scope.selections.selectedCriteria.length !== 0) {
            $scope.isCriteriaSelected = true;
        // }


    }
    $scope.numPerPage = 10;
    $scope.filter = {};
};
</script>

Then, I have the sliding panel along with the steps like so:

<div yo-sliding-panel-step step-id="second" step-handler='leaf()'> 
 <!-- stuff -->
 {{list.name}} <!-- CANNOT GET ACCESS TO THIS -->
</div>

My directive code is as follows:

    // Sliding Panel
        yoBootstrap.directive('yoSlidingPanel', function() {
            var controller = ['$scope', function($scope) {
                //steps and stepHandlers
                $scope.steps = {};

                $scope.whatever = "something";
            }];

            return {
                restrict: 'AE',
                transclude: true,
                replace: true,
                template: yoSlidingPanelTemplate,
                controller: controller,
                scope: {
                    firstStep: '@'
                },
                link: function($scope, $element, $attributes, ctrl) {
                    ctrl.setAsFirstStep($scope.firstStep); // set the first step
                }
            };
        })

// Sliding Panel "Step"
        .directive('yoSlidingPanelStep', function() {
            return {
                require: '^yoSlidingPanel',
                restrict: 'AE',
                transclude: true,
                replace: false,
                scope: {
                        stepId: '@',
                        stepHandler: '&'
                    },
                template: yoSlidingPanelStepTemplate,
                link: function($scope, $element, $attributes, yoSlidingPanelCtrl) {
                    $scope.currentStep = function() {
                        return yoSlidingPanelCtrl.getCurrentStep();
                    }
                    $scope.setCurrentStep = function(step) {
                        yoSlidingPanelCtrl.setCurrentStep(step);
                    }
                    // Populate "steps" array of objects with steps.
                    yoSlidingPanelCtrl.addStep($scope.stepId, $scope.stepHandler);

                    $scope.shareObject = function(obj){
                        yoSlidingPanelService.returnCopy(obj)
                    }
                }
            }
        })

I need isolate scope on my yo-sliding-panel-step because I want to make them reusable. That said, what is a good approach for me to get access to the scope object data from within the yo-sliding-panel-step ?

Thanks in advance!

Answer 1

My issue is that I cannot access an object defined on the page controller from within the Sliding Panel Step, which has isolate scope.

That precisely is the purpose of isolate scopes.

You can pass in to the directive whatever you want using an attribute and setting the binding. So instead of trying to pass in the full scope, create an option object (with all the relevant data) and pass it in, like you're already doing in a few places.