Question

我正在使用angularjs创建一个多步骤向导。向导中的步骤可能会因用户执行的操作而发生更改。我将步骤存储在导航服务中。我希望导航控制器响应导航步骤中的更改（在服务中发生）。我该怎么做呢？以下代码不起作用。我也在使用ui-router进行向导步骤，我想知道我是否以错误的方式解决这个问题，并且步骤应该存储在父$ scope而不是服务中。但我在网上找到的例子建议使用服务。

这是我写的一篇文章来展示行为（http://jsfiddle.net/uLytj/16/）

向导导航服务：

angular.module("myApp").factory("wizardNavigationSvc", [function () {
    var service = {};
    var steps = []
    var currentStep = {};
    var currentStepIndex = 0;

    return {
        init: function() {
            steps = [{ state: "wizard.options", display: "Options", isActive: true, isFirstStep: true },
                     { state: "wizard.newmodel", icon: "glyphicon-plus", otherActions: ["Add Another Model"] },
                     { state: "wizard.other", display: "Other" },
                     { state: "wizard.customer", display: "Customer Info" },
                     { state: "wizard.shipping", display: "Shipping Info" },
                     { state: "wizard.review", display: "Review", isLastStep: true }];
            currentStep = steps[0];
            currentStepIndex = 0;
        },
        steps: steps,
        currentStep: currentStep
    };
}])

向导导航控制器：

myApp.controller('wizardNavigationCtrl', ['wizardNavigationSvc', '$scope', '$state', function (wizardNavigationSvc, $scope, $state) {
    wizardNavigationSvc.init();
    $scope.steps = wizardNavigationSvc.steps;
    $scope.currentStep = wizardNavigationSvc.currentStep;
}])

向导导航视图：

<div>
    <ul class="nav nav-tabs wizard-tabs">
        <li ng-repeat="step in steps"
            ng-class="step.isActive ? 'active': ''">
            <a ui-sref="{{step.state}}">
            <span ng-if="step.icon" class="glyphicon" ng-class="step.icon"></span>
            <span ng-if="!step.icon">{{step.display}}</span></a>
        </li>
    </ul>
</div>

Answer 1

查看你的jsfiddle，它没有被定义，因为服务没有返回任何东西

Ex：在其中一行（在你的服务中）你有：

steps: steps,
currentStep: currentStep,

这些应该是：

steps: function(){return steps),
currentStep: function(){return currentStep},

Answer 2

我不明白为什么这有效或需要。我必须将我的范围变量放在另一个对象中的服务中。这是小提琴：http://jsfiddle.net/uLytj/25/ 以下是适用的代码：

myApp.service("wizardNavigationSvc", [function () {
    var navigation = {
        steps: [],
        currentStep: {},
        currentStepIndex: 0
    };

将控制器$ scope绑定到服务中的对象

2 个答案: