关于javascript：在ng-view之外绑定Angularjs数据


Binding Angularjs data outside the ng-view

本问题已经有最佳答案，请猛点这里访问。

我有一个包含菜单栏的所有页面的通用模板，它在ng-view之外。从我的一个位于ng-view内的页面，我想将输入数据绑定到该模板区域(该区域与输入页面在不同的控制器下)。我的意思是，当我输入名称时，该名称将显示在模板区域中。是否可能可以吗？这是抢劫犯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body ng-app="sampleApp">

   
   
        name is :{{name}}<br/>
  username is :{{uname}}
     
        <ul class="nav">
         
<li>
 Add name
</li>

         
<li>
 add username
</li>

       
</ul>

     
     
       
     
   
 

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

</body>

This issue with primitives can be easily avoided by following the"best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

Having a '.' in your models will ensure that prototypal inheritance is in play. So, use

1
2
<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?

PLNKR上的演示

$scope.obj的工作方式类似于$rootScope变量。它是为了原型继承吗？

作用域按层次结构排列，类似于应用程序的DOM结构。每个AngularJS应用程序只有一个根作用域，但可以有任意数量的子作用域。

1
2
3
ng-app --> $rootScope
 |- ng-controller --> $scope (container)
    |- ng-view      --> $scope (view)

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

></P><P>有关详细信息，请参阅AngularJS开发人员指南-范围层次结构</P></p> <blockquote><p> <wyn>$rootScope</wyn> exists, but it can be used for evil</p> <p> Scopes in AngularJS form a hierarchy, prototypically inheriting from a root scope at the top of the tree. Usually this can be ignored, since most views have a controller, and therefore a scope, of their own. </p> <p> Occasionally there are pieces of data that you want to make global to the whole app. For these, you can inject <wyn>$rootScope</wyn> and set values on it like any other scope. Since the scopes inherit from the root scope, these values will be available to the expressions attached to directives like <wyn>ng-show</wyn> just like values on your local <wyn>$scope</wyn>. </p> <p> Of course, global state sucks and you should use <wyn>$rootScope</wyn> sparingly, like you would (hopefully) use with global variables in any language. In particular, don't use it for code, only data. If you're tempted to put a function on <wyn>$rootScope</wyn>, it's almost always better to put it in a service that can be injected where it's needed, and more easily tested. </p> <p> Conversely, don't create a service whose only purpose in life is to store and return bits of data. </p> <p> — AngularJS FAQ - <wyn>$rootScope</wyn> exists, but it can be used for evil </p> </blockquote> <div class=

相关讨论

Angular的$rootscope可以用于在应用程序的组件之间共享信息(除了其他用途)。我们不鼓励过分依赖它，因为它可能会受到污染，或者很难在应用程序的整个"堆栈"范围内上下追踪。但是，如果您确实需要或想要设置"全局"数据，它会工作：

在新的punkr中，您将使用ng模型和ng值作为文本输入。完全删除ng值。(它通常用于具有"value"属性的元素，如单选按钮和复选框，其中"value"是"checked"或"selected"等)。ng model是您想要的。

http://plnkr.co/edit/dnzodricxlhtg4dqovdj？P=预览

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

和

1
2
Name: <input ng-model="$root.name">
You entered: {{$root.name}}
相关讨论