在Ang-view之外绑定Angularjs数据

时间：2017-06-30 00:22:13

标签： javascript angularjs

我有一个包含菜单栏的所有页面的通用模板，它位于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>

2 个答案:

答案 0 :(得分：1)

Angular的$ rootScope可用于在应用程序组件之间共享信息（除了其他用途）。不鼓励过多地依赖它，因为它可能会被污染或难以追踪应用程序的整个范围堆栈＆＃39;。但如果你真的需要或想要设置全球＆＃39;数据，它的工作原理：

在新的plunkr中，您使用ng-model和ng-value作为文本输入。完全删除ng值。 （它通常用于具有＆＃39;值＆＃39;属性的元素，例如单选按钮和复选框，其中＆＃39;值已被选中＆＃39;或被选中＆ ＃39;等等.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>

答案 1 :(得分：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 (container)
    |- ng-view      --> $scope (view)

通过使用：<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

相关问题
最新问题