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

Question

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

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

当我尝试将此值作为 "options" 传递到选项卡数据时出现问题。值 change/icon 切换未在验证状态更改时处理。如果我将 hard-coded "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() return 是一个布尔值，该值将被复制并分配为 status 属性.

的值

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

options: {
  status: false
}

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

一个简单的解决方案是 stateService.getForm1State() return 一个对象。

例如：

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

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

Extending UI-Router-Tabs To Display Form Validation State

tabs

angularjs

angularjs-service

angular-ui-bootstrap

angular-ui-router