Javascript 澄清教程中的AngularJS理论片段_Javascript_Angularjs_Inheritance_Scope

Javascript 澄清教程中的AngularJS理论片段

javascript angularjs inheritance

Javascript 澄清教程中的AngularJS理论片段,javascript,angularjs,inheritance,scope,Javascript,Angularjs,Inheritance,Scope,在这段伟大的理论片段中，我不禁想知道：将控制器和模板粘合在一起的范围一起进入一个动态视图，并不是孤立于该视图的其他部分页这意味着页面的不同部分（例如属性名称冲突）可能存在对我们的视图产生意外且难以调试的副作用（同一链接中未引用的第1部分非常清楚）我无法想象现实生活中的代码示例能够说明引用文本中显示的问题。你能给我举个例子吗我自己的猜测是基于继承的作用域： <!doctype html> <html lang="en" ng-app="phonecatApp"&

在这段伟大的理论片段中，我不禁想知道：

将控制器和模板粘合在一起的范围一起进入一个动态视图，并不是孤立于该视图的其他部分页这意味着页面的不同部分（例如属性名称冲突）可能存在对我们的视图产生意外且难以调试的副作用

（同一链接中未引用的第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>

但我一点也不确定，因为

PhoneListTwoController

的可能操作看起来不像是“页面不同部分中随机的、不相关的更改”。一个作用域在另一个作用域的内部，操纵外部作用域，我认为作者的意思不同，比如两个兄弟作用域相互干扰

因此，我再次要求您用相关的代码示例来说明引用的段落。

该段落是由as添加的

你可能想问他你的问题。

那一段是由as添加的

你可能想问他你的问题。

教程可能有点夸张了。至少它不是很精确

我已经创建了一个显示什么样的干扰是可能的，什么是不可能的

ng控制器指令实际上创建了一个新的子范围。作用域上的变量通常由子作用域继承

这意味着控制器1定义的$scope.someVariable对控制器2定义的$scope.someVariable没有任何影响-（控制器1既不是控制器2的祖先，也不是其后代）。这还意味着为$scope.someVariable设置的值不能被其父控制器覆盖，该父控制器在其作用域上设置了相同的变量。控制器3也是父控制器的后代，它本身未设置$scope.someVariable。在这种情况下，plunker显示父控制器设置的值在控制器3控制的视图片段中生效。在父控制器作用域的所有子作用域上，someVariable将作为

Object.getPrototypeOf（$scope）.someVariable

尽管如此，我同意本教程的观点，即使用将其状态绑定到控制器实例（在模板中称为$ctrl）而不是直接绑定范围的组件有很多优点。组件具有清晰的导入和导出模型。这使得它们可以互换，并增加了重复使用的机会

本教程可能有点夸张。至少它不是很精确

我已经创建了一个显示什么样的干扰是可能的，什么是不可能的

ng控制器指令实际上创建了一个新的子范围。作用域上的变量通常由子作用域继承

Object.getPrototypeOf（$scope）.someVariable

这确实涉及范围继承及其（通常不是直接的）后果。如果你还没有看过，这里有一篇很棒的评论：

它可能比你想象的要复杂得多：）特别是（正如教程提到的）对于大型、真实世界的应用程序，不同的团队处理应用程序的不同部分，或者某些部分在几个月内保持不变

只显示一个非常简单的“现实主义”示例（同样也没有大型应用程序那么复杂）：

想象你正在开始自己的事业；电子商店。你想从小做起，所以现在你只有手机和平板电脑

您只需要一个基本布局—标题、导航栏和内容区：

My Cool e-Shop
----------------------------
[Phones]   [Tablets]
----------------------------

<CONTENT HERE>

到目前为止，一切顺利。你有一个几乎相同的路线和平板电脑的指令，一切都很好

很快，您的可用手机和平板电脑列表就会增加，您需要添加一个

过滤器

功能。小菜一碟，您只需将以下代码片段添加到指令的模板中：

<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
很快，销售额开始下降，不知不觉中你就破产了

<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>