在ng-view之外绑定Angularjs数据[重复]答案

【问题标题】：Binding Angularjs data outside the ng-view [duplicate]在ng-view之外绑定Angularjs数据[重复]
【发布时间】：2017-06-30 17:24:05
【问题描述】：

我有一个包含菜单栏的所有页面的通用模板，它位于ng-view 之外。从我位于ng-view 内部的页面之一，我想将输入数据绑定到此模板区域（此区域与输入页面在不同的控制器下）。我的意思是当我输入名称时，名称将出现在模板区域。可能吗？这是plunker

<body ng-app="sampleApp">

  <div class="container"> 
    <div class="row">
        name is :{{name}}<br/>
  username is :{{uname}}
      <div class="col-md-3">
        <ul class="nav">
          <li><a href="#name"> Add name </a></li>
          <li><a href="#uname"> add username </a></li>
        </ul>
      </div>
      <div class="col-md-9">
        <div ng-view></div>
      </div>
    </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="app.js"></script>

</body>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

遵循always have a '.' in your ng-models 的“最佳实践”可以轻松避免原语的这个问题 - 观看 3 分钟。 Misko 演示了 ng-switch 的原始绑定问题。

有一个“。”在您的模型中将确保原型继承发挥作用。所以，使用
<input type="text" ng-model="someObj.prop1"> rather than 
<input type="text" ng-model="prop1">.
— AngularJS Wiki - What are the nuances of scope prototypal / prototypical inheritance?

DEMO on PLNKR

$scope.obj 像 $rootScope 变量一样工作。是为了原型继承吗？

范围以分层结构排列，模仿应用程序的 DOM 结构。每个 AngularJS 应用程序只有一个根作用域，但可以有任意数量的子作用域。

ng-app --> $rootScope |- ng-controller --> $scope (容器) |- ng-view --> $scope (视图)

通过使用：<input ng-model="obj.name" /> 视图控制器中的ng-model 指令使用原型继承从视图外部找到$scope.obj。然后它可以获取和设置该对象的name 属性。

欲了解更多信息，请参阅AngularJS Developer Guide - Scope Hierarchies

$rootScope存在，但可以作恶

AngularJS 中的作用域形成一个层次结构，原型继承自树顶部的根作用域。通常这可以忽略，因为大多数视图都有自己的控制器，因此也有自己的作用域。

有时，您想让某些数据对整个应用程序具有全局性。对于这些，您可以注入 $rootScope 并像任何其他范围一样在其上设置值。由于作用域从根作用域继承，这些值将可用于附加到指令的表达式，如 ng-show，就像本地 $scope 上的值一样。

当然，全局状态很糟糕，您应该谨慎使用$rootScope，就像（希望）在任何语言中使用全局变量一样。特别是，不要将其用于代码，仅用于数据。如果您想在 $rootScope 上放置一个函数，最好将它放在一个可以在需要的地方注入并且更容易测试的服务中。

相反，不要创建一个生活中唯一目的是存储和返回数据位的服务。

— AngularJS FAQ - $rootScope exists, but it can be used for evil

【讨论】：

$scope.obj 像 $rootScope 变量一样工作。它是用于原型继承吗？

【解决方案2】：

Angular 的 $rootScope 可用于在应用程序的组件之间共享信息（除了其他用途）。不鼓励过度依赖它，因为它可能会被污染或难以在应用程序的整个范围“堆栈”中向上和向下跟踪。但如果你真的需要或想要设置“全局”数据，它可以工作：

在您的新 plunkr 中，您同时使用 ng-model 和 ng-value 进行文本输入。完全删除 ng-value。（它通常用于具有 'value' 属性的元素，例如单选按钮和复选框，其中 'value' 是 'checked' 或 'selected' 等） ng-model 是你想要的。

http://plnkr.co/edit/DnzOdRicXLHtg4DqoVdJ?p=preview

name is :{{$root.name}}
username is :{{$root.uname}}

和

Name: <input ng-model="$root.name">
<h1>You entered: {{$root.name}}</h1>

【讨论】：

不知道为什么，但是 ng-value 现在不起作用！
抱歉，我没有看到 ng 值
对不起，我已经更新了问题和plunker！
ng-value 绊倒了它。请参阅我修改后的答案+plunkr。
感谢您的努力，但在这种情况下，rootScope 可能有点奇怪，因为它会在页面重新加载后消失！

$rootScope存在，但可以作恶

`$rootScope`存在，但可以作恶