扩展 UI-Router-Tabs 以显示表单验证状态

Question

我是 Angular 的新手，在弄清楚如何将数据服务中的值绑定到我创建的 https://github.com/rpocklin/ui-router-tabs 项目的自定义项时遇到了问题。

自定义是在选项卡标题中显示一个图标，该图标根据相应 ui-view 的验证状态进行切换。我已经连接了一个数据服务，该服务在验证成功或失败时更新，并且呈现选项卡的控制器“看到”了绑定。

当我尝试将此值作为“选项”传递到选项卡数据时出现问题。随着验证状态的改变，值改变/图标切换没有被处理。如果我将硬编码的“true”传递到选项卡数据中，则会显示所需的图标。

vm.tabs = [
        {
            heading: "View 1",
            route: "manage.view1",
            options: {
                status: vm.stateService.getForm1State()
            }
        },
        {
            heading: "View 2",
            disable: vm.disableTabs,
            route: "manage.view2",
            options:{
                status: true
            }

        }
    ];

这似乎不是那么困难的事情，所以我认为我只是遗漏了一些关于范围界定的明显内容。这是一个证明问题的 plunk http://plnkr.co/edit/iefvwcffSZmpfy83NGde?p=preview。

注意：应该标记为 ui-router-tabs，但我缺乏创建标记的声誉。

Answer 1

问题出在这里：

options: {
  status: vm.stateService.getForm1State()
}

由于stateService.getForm1State() 返回一个布尔值，该值将被复制并分配为status 属性的值。

所以当这段代码执行一次时，例如：

options: {
  status: false
}

options 对象不会对 stateService 中的任何更改做出反应。

一个简单的解决方案是让stateService.getForm1State() 改为返回一个对象。

例如：

function stateService() {

  var form1IsValid = {
    status: false
  };

  return {
    getForm1State: getForm1State,
    setForm1State: setForm1State
  };

  function getForm1State() {
    return form1IsValid;
  }

  function setForm1State(newValue) {
    form1IsValid.status = newValue;
    return;
  }

然后让options对象引用同一个对象：

options: vm.stateService.getForm1State()

现在只要你有：

options.status

它将与以下内容相同：

vm.stateService.getForm1State().status

它会正确地反映变化。

演示： http://plnkr.co/edit/KjXVSSMJbLw7uod0ac6O?p=preview