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/

10-12 07:38
查看更多