在Step 3 of AngularJS Tutorial的重要理论摘要中,这段话让我感到奇怪:
范围,粘合我们的控制器和模板
一起变成一个动态视图,并非与其他部分隔离
页。这就是说,
页面的不同部分(例如,属性名称冲突)可能有
我们认为意外和难以调试的副作用。
(来自同一链接的未引用的第1部分非常清楚)
我无法想象一个现实生活中的代码示例,该示例说明了引号中显示的问题。你能给我看看这样的例子吗?
我自己的猜测基于继承的范围:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
</head>
<body>
<div ng-controller="PhoneListController">
{{secretObject.dontDareToTouchThat}}
<div ng-controller="PhoneListTwoController">
<ul ng-click="touchThat()">
<li ng-repeat="phone in phones" >
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</body>
</html>
控制器的逻辑:
'use strict';
angular.module('phonecatApp', [])
.controller('PhoneListController', function PhoneListController($scope) {
$scope.secretObject = {
dontDareToTouchThat: 'I"m pure and beautiful'
}
}).controller('PhoneListTwoController', function PhoneListTwoController($scope) {
$scope.touchThat = function(){
$scope.secretObject.dontDareToTouchThat = 'Derp';
}
$scope.phones = [ ... ];
});
但是我完全不确定,因为
PhoneListTwoController
的可能动作看起来并不像“页面的不同部分中的随机,无关的更改”。一个范围恰好在另一个范围之内,操纵外部范围,我认为作者的意思有所不同,例如两个同级范围相互弄乱。因此,我再次请您用相关的代码示例来说明引用的段落。
最佳答案
实际上,这确实是指范围继承及其(通常不是直接的)后果。如果您还没有看过,这里有一篇很棒的文章:Understanding Scopes
它可能比您认为的要棘手得多:)
尤其是(如本教程所述),适用于大型的实际应用程序,其中不同的团队在应用程序的不同部分上工作,或者某些部分在几个月内保持不变。
仅显示一个非常简单的“现实主义的”示例(再也不像大型应用程序那样复杂):
想象一下您正在开始自己的生意;一个电子商店。您希望从小处着手,因此目前只有手机和平板电脑。
您只需要一个基本布局-标题,导航栏和您的内容区域:
My Cool e-Shop
----------------------------
[Phones] [Tablets]
----------------------------
<CONTENT HERE>
您设置了两条路线-一条用于电话,一条用于平板电脑-并决定将每个页面的内容封装为类似组件的指令。例如。
#/phones
路由将具有类似于<phone-list></phone-list>
的模板,并且phoneList
指令将如下所示(不幸的是,您从未听说过隔离范围):.directive('phoneList', function phoneListDirective() {
// DDO
return {
template:
'<h2>Phones</h2>' +
'<ol>' +
'<li ng-repeat="phone in phones">' +
'<b>{{ phone.name }}</b> (OS: {{ phone.os }})' +
'</li>' +
'</ol>',
scope: true,
link: phoneListPostLink
};
// Functions - Definitions
function phoneListPostLink(scope) {
scope.phones = [
{id: 1, name: 'Samsung Galaxy', os: 'Android'},
{id: 2, name: 'Google Nexus', os: 'Android'},
{id: 3, name: 'Nokia Lumia', os: 'Windows'},
{id: 4, name: 'Apple iPhone', os: 'iOS'}
];
}
})
到目前为止,一切都很好。平板电脑的路线和指令几乎相同,一切正常。
很快,可用手机和平板电脑的列表就会增加,您需要添加
filter
功能。小菜一碟,您只需将以下代码段添加到指令的模板中:<div>
Filter:
<input type="search" ng-model="search.name" placeholder="Name..." />
<input type="search" ng-model="search.os" placeholder="OS..." />
</div>
<li ng-repeat="phone in phones | filter:search">
如此简单,您的用户就可以按名称和操作系统搜索手机和平板电脑。生意蒸蒸日上,生活多变。
很快过去了几个月,您的网站已经发展壮大,拥有更多的部分和产品类别。您决定将“全局搜索”窗口小部件添加到导航栏上。您需要做的就是将以下代码段添加到主模板中:
<div class="search-widget">
<input type="search" ng-model="query" placeholder="Search the entire site..." />
<button ng-click="search(query)" ng-disabled="!query">Search</button>
</div>
(当然在主控制器上实现
$scope.search()
方法...)剩下的就是历史了:P
很快,销售就会开始下降,并且您不知道该怎么办。
这是一个简单的POC,可以在实践中看到:Demo
tl; dr
使用隔离范围和利润!
关于javascript - 从教程中澄清AngularJS理论片段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38172637/