AngularJs 避免范围界定问题

Question

我最近花了 4 个多小时才弄清楚为什么我的 ng-model 指令与 ng-options 结合使用时没有正确绑定到我的控制器中的属性。 <select> 元素已正确初始化 - 从控制器（父）范围接收值。但是子作用域没有正确更新父作用域。在检查了以下问题和 plunkers 之后，我能够为这个问题开发一个 "work around"：

Helpful Whosebug question 1

Helpful Whosebug question 2

Basic Plunker

我发现我在 <select> 元素中绑定的属性绑定到控制器子范围内的同名属性 - 因此不是值未按预期反映在控制器的范围内。更改后

<select ng-options="asset as asset.Name for asset in allAssets" ng-model="selectedAsset" ng-change="lookupAssetPermissions()"></select>

到

    <select ng-options="asset as asset.Name for asset in allAssets" ng-model="$parent.selectedAsset" ng-change="lookupAssetPermissions()"></select>

selectedAsset 中的值正确绑定到控制器范围内的属性（如 ng-change 事件处理程序中所示）。我的元素的整个上下文如下：

<!---outer div has controller level scope----->
<div>
    <!---inner div creates child scope with ng-if----->
    <div ng-if="true condition here">
        <!---select statement from above----->
        <select ng-model="$parent.selectedAsset">...</select>
    </div>
</div>

在这种情况下，除了有目的地绑定到父范围外，我还有其他选择吗？如果我有多个子作用域（嵌套的 ng-if 语句），我是否需要更改 ng-model 以绑定到 $parent.$parent.$parent....selectedAsset 以便更新我的控制器作用域中的值？有关于这个话题的"best practices"吗？

Answer 1

将所有变量放入某个对象中，即：

$scope.Model = {
  selectedAsset : 'mySelectedAsset1',
  selectedAsset2 : 'mySelectedAsset2',
  selectedAsset3 : 'mySelectedAsset3'
}

那么您可以：

<div ng-repeat> //new scope
<div ng-repeat> // new scope
<input ng-model="Model.selectedAsset">

这也会降低您的 'dependency' 在 $scope 上的作用，定义这样的 Model 对象将向正在阅读您的代码的每个人展示您拥有的模型。

AngularJs 避免范围界定问题

AngularJs Avoiding Scoping Issues

javascript

data-binding

angularjs

angular-ngmodel