Question

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

我有一个如此定义的向导指令：

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

});

然后，我有panel / 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>

在这里，＆＃34;面板＆＃34;或者＆＃34;步骤＆＃34;有一个与step-id关联的goto-next以及一个gotoNext: '&'属性，该属性作为// 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); } } })的参考传递给Panel指令。

这里是面板指令的样子：

 // 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();
                }

            }
        }
    })

和Controls指令：

moveForward()

当我点击DOM上的下一步按钮时出现问题。我希望undefined函数运行相应的next-handler。而是返回{{1}}

我无法确定代码出错的地方。

Answer 1

    <script>
    function wizcontroller($scope) {
      console.log("Controller in the page:" + $scope.$id)
      var doStuff = function() {
        console.log("TEST")
        return "test"; // <- The function needed to return something. :P
     }
    };
    </script>

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

1 个答案: