tabs - 获取 Angular UI 选项卡中的范围

Question

我在选项卡(Angular UI)上下文中的 Angular 范围方面遇到了一些问题。

这是我的 jsfiddle example (精简示例显示多个选项卡上的字段，并在选项卡外部有一个提交按钮)。

这是基本的 html 布局:

<form...>
  <tab>
    <pane>
      <input...>
    </pane>
  </tab>
</form>

查看jsfiddle example ，如果没有选项卡，如果我提交一个非常基本的表单，我会看到 $scope.user 是一个对象。由于字段位于 Pane (选项卡)内，因此范围不正确。如何访问 createUser 中提交的用户对象？

Answer 1

问题在于用户模型深深地埋藏在隔离范围内。要使代码按预期工作，您需要提醒 $scope.$$childHead.panes[0].$$nextSibling.user.first_name 的值不是$scope.user。这显然不是一个解决方案。

一个简单的解决方案是向 Controller 范围添加一个空的user对象。 HTML 中的 ng-model 指令将绑定(bind)到此属性。您的 Controller 应如下所示:

function MyCtrl($scope) {
  $scope.user = {};
  $scope.createUser = function () {
    alert($scope.user);
  };
}