Question

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

我发现我在<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">

这也会使你对'范围'的依赖性降低，定义这样的Model对象会向每个正在阅读代码的人展示你的模型。

AngularJs避免范围问题

1 个答案: