无法调用$scope上定义的函数

我正在构建一个实现类似多步骤向导功能的指令。为此，我定义了 3 个指令，一个用于向导容器，一个用于实际面板或步骤，一个用于下一个/上一个控件。

我有一个向导指令，定义如下：

function(angular, plBootstrap, plModalWizardTemplate, plModalWizardPanelTemplate, element) {
'use strict';
plBootstrap.directive('plModalWizard', function() {
    var controller = ['$scope', function($scope) {
        console.log('Controller in the directive: ' + $scope.$id);
        $scope.steps = {};
        // step tracking
        $scope.currentStep = $scope.prevStep = "";
        // Helper methods to add steps to the wizard.
        this.addStep = function(step, nextHandler) {
            //construct object
            $scope.steps[step] = nextHandler;
        };
        // Nav functions
        this.moveForward = function() {
            // should really look up the hash
            // upon being called, this function checks the currentStep
            // then gets the corresponding nextHandler
            // then handles the navigation to the next step
            console.log("Current Step:" + $scope.currentStep);
            var foo = $scope.steps[$scope.currentStep]();
            console.log("Scope in directive:" + $scope.$id)
        }
        this.setAsFirstStep = function(step) {
            this.setCurrentStep(step)
        }
    }];
    return {
        restrict: 'AE',
        transclude: true,
        replace: true,
        template: plModalWizardTemplate,
        controller: controller,
        scope: {
            firstStep: '@'
        },
        link: function(scope, element, attributes, ctrl) {
            ctrl.printHash();
            ctrl.setAsFirstStep(scope.firstStep); // set the first step
        }
    };
});

然后，我有面板/步骤指令，它基本上将步骤名称和下一步处理程序作为键值对添加到哈希中。这个想法是向导将读取$scope.currentStep并从哈希执行相应的下一步处理程序。

从上面的代码中可以看出，当单击 DOM 上的 Next 按钮时，将调用 stepForward() 函数。

<script>
function wizcontroller($scope) {
  console.log("Controller in the page:" + $scope.$id)
  var doStuff = function() {
  console.log("TEST")
}
};
</script>
<div pl-modal-wizard first-step="Jam" ng-controller="wizcontroller">
<div pl-modal-wizard-panel step-id="Jam" goto-next="doStuff()">
    {{stepId}}
</div>
<div pl-modal-wizard-panel step-id="Bread" goto-next='moveForward()'>{{stepId}}</div>
<div pl-modal-wizard-panel step-id="Boo" goto-next="moveForward()">{{stepId}}</div>
<div pl-modal-wizard-panel step-id="Foo" goto-next="moveForward()">{{stepId}}</div>
<div pl-modal-wizard-panel step-id="%steps" goto-next="moveForward()">{{stepId}}</div>
<div pl-modal-wizard-panel step-id="-10" goto-next="moveForward()">{{stepId}}</div>

<!-- Controls -->
<div class="wizard-controls-wrapper pull-right">
    <button type="" pl-sliding-panel-control ng-click="stepBackward()" class="btn btn-primary">Previous</button>
    <button type="" pl-sliding-panel-control ng-click="stepForward()" class="btn btn-primary">Next</button>
</div>
</div>

在这里，"面板"或"步骤"具有与其关联的step-id以及作为引用传递给 Panel 指令gotoNext: '&'的 goto-next 属性。

下面是面板指令的外观：

// Wizard Panel
    .directive('plModalWizardPanel', function() {
        return {
            require: '^plModalWizard',
            restrict: 'AE',
            transclude: true,
            replace: false,
            scope: {
                stepId: '@',
                gotoNext: '&'
            },
            template: plModalWizardPanelTemplate,
            link: function(scope, element, attributes, plModalWizardCtrl) {
                console.log('Step: ' + scope.$parent.$id);
                // Helper methods from parent directive
                // for getting current step
                scope.currentStep = function() {
                    return plModalWizardCtrl.getCurrentStep();
                }
                scope.setCurrentStep = function(step) {
                    plModalWizardCtrl.setCurrentStep(step);
                }

                // Populate "steps" array of objects with steps.
                yplModalWizardCtrl.addStep(scope.stepId, scope.gotoNext);
            }
        }
    })

和控制指令：

 // Wizard controls
    .directive('plSlidingPanelControl', function() {
        return {
            require: '^plModalWizard',
            restrict: 'AE',
            replace: false,
            scope: true,
            transclude: false,
            link: function(scope, element, attributes, plModalWizardCtrl) {
                scope.stepForward = function() {
                    plModalWizardCtrl.moveForward();
                }
                scope.stepBackward = function() {
                    plModalWizardCtrl.moveBackward();
                }
            }
        }
    })

当我单击 DOM 上的"下一步"按钮时出现问题。我希望 moveForward() 函数运行相应的下一个处理程序。相反，它会返回undefined

我无法确定我的代码哪里出了问题。