AngularJs避免范围界定问题

AngularJs Avoiding Scoping Issues

本文关键字：问题 范围 AngularJs      更新时间：2023-09-26

我最近花了4个多小时才弄清楚为什么与ng-options组合使用的ng-model指令没有正确绑定到控制器内的属性。<select>元素正在正确初始化-接收来自控制器（父）作用域的值。但是子作用域没有正确更新父作用域。在检查了以下问题和问题后，我能够为这个问题制定一个"解决方案"：

有用的堆叠物流问题1

有用的堆叠物流问题2

基本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以更新控制器作用域中的值？在这个话题上有什么"最佳实践"吗？

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

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

然后你可以：

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

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

相关文章：