我正在构建一个实现多步向导功能的指令。 为此,我定义了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}}
我无法确定代码出错的地方。
答案 0 :(得分:0)
<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>