AngularJs 避免范围问题

Question

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

Helpful stackoverflow question 1

Helpful stackoverflow 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 以更新控制器范围中的值？有没有关于这个主题的“最佳实践”？

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">

这也降低了您对 $scope 的“依赖性”，定义这样的模型对象将向正在阅读您代码的每个人展示您拥有的模型。