深入理解 AngularJS 的 Scope-优快云博客

本文探讨了AngularJS中使用嵌套Controller时遇到的问题，即如何在子Scope更新父Scope中的Model。以产品列表为例，介绍了ProductListController与ProductDetailController之间的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载地址：点击打开链接

一、遇到的问题

问题发生在使用 AngularJS 嵌套 Controller 的时候。因为每个 Controller 都有它对应的 Scope（相当于作用域、控制范围），所以 Controller 的嵌套，也就意味着 Scope 的嵌套。这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢？从子 Scope 怎样更新父 Scope 里的 Model 呢？

这个问题很典型，比方说当前页面是一个产品列表，那么就需要定义一个 ProductListController

function ProductListController($scope, $http) { $http.get('/api/products.json') .success(function(data){ $scope.productList = data; }); $scope.selectedProduct = {}; }

你大概看到了在 Scope 里还定义了一个 selectedProduct 的 Model，表示选中了某一个产品。这时会获取该产品详情，而页面通过 AngularJS 中的 $routeProvider 自动更新，拉取新的详情页模板，模板中有一个 ProductDetailController

转载于:https://my.oschina.net/weiqinxue/blog/725296