Angularjs 扩展UI路由器选项卡以显示表单验证状态

我是Angular的新手，在弄清楚如何将数据服务中的值绑定到我创建的项目的定制时遇到了问题

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

当我试图将此值作为“选项”传递到选项卡数据时，问题就出现了。验证状态更改时，未处理值更改/图标切换。如果我将硬编码的“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
            }

        }
    ];

这看起来并没有那么难，所以我想我只是缺少了一些关于范围界定的明显的东西。下面是一个演示这个问题的例子

注意：应标记为ui路由器选项卡，但我缺乏创建标记的信誉。

问题在于：

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

由于

stateService.getForm1State（）

返回一个布尔值，因此将复制该值并将其指定为

status

属性的值

因此，当此代码执行一次时，例如：

options: {
  status: false
}

选项

对象不会对

状态服务

中的任何更改作出反应

一个简单的解决方案是让

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: vm.stateService.getForm1State()

现在，只要您有：

options.status

它将与以下内容相同：

vm.stateService.getForm1State().status

它将正确地反映这些变化

---

演示：

非常感谢，非常感谢您的帮助！我知道这不应该很难，但就是看不出问题所在。