如何在angularjs向导中的下一个按钮后面执行逻辑

Question

我有一个customers.create.html部分绑定到WizardController。

然后我有3个customers.create1,2,3.html部分文件绑定到WizardController1,2,3

每个WizardController1,2或3都有一个isValid（）函数。此功能确定用户可以继续进行下一步。

粘贴的html底部的下一个按钮应该是全部禁用吗？ isValid（）函数是false ...

这是我的问题，但同时对我来说似乎不正确。

我想我没有正确地完成向导......

有人可以指导我如何继续当前步骤isValid函数返回false时禁用底部下一个按钮的架构。

如何从WizardController连接任何WizardController1,2或3？

像广播这样的事件是一个好方向吗？

<div class="btn-group">
    <button class="btn" ng-class="{'btn-primary':isCurrentStep(0)}" ng-click="setCurrentStep(0)">One</button>
    <button class="btn" ng-class="{'btn-primary':isCurrentStep(1)}" ng-click="setCurrentStep(1)">Two</button>
    <button class="btn" ng-class="{'btn-primary':isCurrentStep(2)}" ng-click="setCurrentStep(2)">Three</button>
</div>

<div ng-switch="getCurrentStep()" ng-animate="'slide'" class="slide-frame">

    <div ng-switch-when="one">
        <div ng-controller="WizardController1" ng-include src="'../views/customers.create1.html'"></div>
    </div>

    <div ng-switch-when="two">
        <div ng-controller="WizardController2" ng-include src="'../views/customers.create2.html'"></div>
    </div>

    <div ng-switch-when="three">
        <div ng-controller="WizardController3" ng-include src="'../views/customers.create3.html'"></div>
    </div>

</div>

<a class="btn" ng-click="handlePrevious()" ng-show="!isFirstStep()">Back</a>
<a class="btn btn-primary" ng-disabled="" ng-click="handleNext(dismiss)">{{getNextLabel()}}</a>



'use strict';
angular.module('myApp').controller('WizardController', function($scope) {

    $scope.steps = ['one', 'two', 'three'];
    $scope.step = 0;
    $scope.wizard = { tacos: 2 };

    $scope.isFirstStep = function() {
        return $scope.step === 0;
    };

    $scope.isLastStep = function() {
        return $scope.step === ($scope.steps.length - 1);
    };

    $scope.isCurrentStep = function(step) {
        return $scope.step === step;
    };

    $scope.setCurrentStep = function(step) {
        $scope.step = step;
    };

    $scope.getCurrentStep = function() {
        return $scope.steps[$scope.step];
    };

    $scope.getNextLabel = function() {
        return ($scope.isLastStep()) ? 'Submit' : 'Next';
    };

    $scope.handlePrevious = function() {
        $scope.step -= ($scope.isFirstStep()) ? 0 : 1;
    };

    $scope.handleNext = function(dismiss) {
        if($scope.isLastStep()) {
            dismiss();
        } else {
            $scope.step += 1;
        }
    };
});

durandalJS向导示例代码，可用于重写angularJS的向导：

define(['durandal/activator', 'viewmodels/step1', 'viewmodels/step2', 'knockout', 'plugins/dialog', 'durandal/app', 'services/dataservice'],
    function (activator, Step1, Step2, ko, dialog, app, service) {

        var ctor = function (viewMode, schoolyearId) {
            debugger;
            if (viewMode === 'edit') {
                service.editSchoolyear(schoolyearId);
            }
            else if (viewMode === 'create') {
                service.createSchoolyear();
            }

            var self = this;
            var steps = [new Step1(), new Step2()];
            var step = ko.observable(0);   // Start with first step
            self.activeStep = activator.create();
            var stepsLength = steps.length;

            this.hasPrevious = ko.computed(function () {
                return step() > 0;
            });

            self.caption = ko.observable();           
            this.activeStep(steps[step()]);

            this.hasNext = ko.computed(function () {
                if ((step() === stepsLength - 1) && self.activeStep().isValid()) {
                    // save
                    self.caption('save');
                    return true;
                } else if ((step() < stepsLength - 1) && self.activeStep().isValid()) {
                    self.caption('next');
                    return true;
                }
            });

            this.isLastStep = function() {
                return step() === stepsLength - 1;
            }

            this.next = function() {
                if (this.isLastStep()) {

                    $.when(service.createTimeTable())
                     .done(function () {
                         app.trigger('savedTimeTable', { isSuccess: true });
                     })
                     .fail(function () {
                         app.trigger('savedTimeTable', { isSuccess: false });
                     });

                }
                else if (step() < stepsLength) {
                    step(step() + 1);
                    self.activeStep(steps[step()]);
                }
            }

            this.previous = function() {
                if (step() > 0) {
                    step(step() - 1);
                    self.activeStep(steps[step()]);
                }
            }
        }        
        return ctor;
    });