Question

我使用ui-bootstrap来处理我的模态。我将$ scope作为scope参数传递，它看起来像这样：

var modalInstance = $modal.open({
    templateUrl: 'views/pages/gethelp/modals/bulk_change.html',
    controller: BulkChangeCtrl,
    size: 'lg',
    scope: $scope,
    backdrop:"static",
    resolve: {
      type: function() { return type; },
      field:function() { return field; },
      preset: function() { return preset; }
    }
  });

在我的模态控制器中，我定义了一个模型字符串值，我希望它既可以绑定到输入，也可以在用户点击提交时用作选定的值。这很简单，设置如下：

$scope.val = "";

然而，在我的提交功能中，通过按钮点击调用，无论如何，$ scope.val为空。就像这些函数引用了一个完全不同的$ scope.val版本一样。但在我看来，我可以绑定{{val}}没问题。

这是为什么？当我将代码更新为：

$scope.obj = { val:"" };

这一切都按预期工作，我可以绑定到{{obj.val}}。我在这里完全错过了什么？

Answer 1

这是因为bootstrap使用scope参数创建了提供范围的子范围（@ var modalScope = (modalOptions.scope || $rootScope).$new();）。所以在有角度的子范围中，原型继承自父母。原始类型（当绑定中没有.时）将不会在原型链中查询并添加新属性val并更新它，这将不会反映在基础范围中，只有对引用类型的更新（对象，函数引用等..）才会反映出更改，因此obj.val可以工作，因为父作用域也引用了相同的obj。

所以当你这样做时： -

 $scope.val = "";

在提供的范围之外创建的新子范围将更新为子项的val，因为它未作为引用类型的值更新，您不会在其父级更新它。

这是good read

为什么不从ui-bootstrap模态控制器绑定到$ scope字符串值？

1 个答案: