angularjs - WizardHandler.wizard().goTo

Question

我正在使用 https://github.com/mgonto/angular-wizard创建一个 Angular 向导，其步骤可以从路由参数中调用:

.../step/1

.../step/2

等等

所以我创建了这个 Controller :

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams',
    function($scope,WizardHandler,$routeParams)
    {
        //$scope.data = {};
        $step = $routeParams.step;
        WizardHandler.wizard().goTo($step);     
    }])

在 app.js 和 index.html 上正确创建了正确的链接和路由

但是当我进入网址时，我得到了这个:

TypeError: Cannot call method 'goTo' of undefined

这是使用 url 参数预先选择 Angular 向导步骤的方法吗？

================= 更新=====================

我尝试过这样的事情:

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams',
函数($scope，WizardHandler，$routeParams)
{
$step = $routeParams.step;

    $scope.$watch(WizardHandler.wizard(), function(step) {
            WizardHandler.wizard().goTo($step);
    });
}])

这个想法是监视告诉我何时实例化 WizardHandler.wizard() 以便调用 .goTo 方法。使用此 Controller ，我收到此错误:

TypeError:无法设置未定义的属性“已选择”

不确定我是否正确使用 watch 。我什至测试了 step 变量，没问题，显示的值与 url 相同。

================= 解决了! ======================

    var step = parseInt($routeParams.step); // Important, as routeParams returns an String: the wizardHandler uses either an integer number or a string name of step. So I am parsing the number to prevent confusion.
    $scope.$watch(
    function() {return WizardHandler.wizard();}, 
    function (wizard) {
    if (wizard) wizard.goTo(step);
    });

我添加了一个 init(step) 函数来处理我需要的一些值的初始值，并且还可以防止由 .../step/SOMERANDOMSTRING 等 url 引起的错误

感谢 GregL 的帮助!

Answer 1

通过快速阅读源代码，我的第一个猜测是您使用了 <wizard>带有 name 的元素指定了属性，但您尚未将相同的名称传递给 WizardHandler.wizard() .在代码中，如果您没有为 WizardHandler.wizard() 指定名称参数，它将使用默认名称，即 <wizard> 使用的名称没有name属性。

由于您在调用 WizardHandler.wizard() 时没有取回您想要的向导。 ，它解析为 undefined并调用 goTo()将因您收到的错误而失败。

至少，将获取向导和.goTo() 分开。调用以添加 checkin 以确保您获得有效的向导:

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams',
    function($scope,WizardHandler,$routeParams)
    {
        //$scope.data = {};
        $step = $routeParams.step;
        var wizard = WizardHandler.wizard();
        if (wizard)
            wizard.goTo($step);
    }]);        

应该有 var之前的关键字 $step赋值也是如此，按照惯例，只有 Angular 核心的东西应该以 $ 开头，或 jQuery 选择变量。

编辑:您也可以尝试使用 $watch()在加载向导时得到通知，但不能保证 $digest()加载向导后将立即调用循环，因此您将依赖于假设 $apply/$digest 循环在向导正确添加到 WizardHandler 之后的某个时间运行。的缓存。

你会这样做:

.controller('createOrganizer', ['$scope', 'WizardHandler' , '$routeParams',
    function($scope,WizardHandler,$routeParams)
    {
        //$scope.data = {};
        $step = $routeParams.step;
        $scope.$watch(function() {
            return WizardHandler.wizard();
        }, function (wizard) {
            if (wizard)
                wizard.goTo($step);
        });
    }]);