在Ang-view之外绑定Angularjs数据 [英] Binding Angularjs data outside the ng-view
问题描述
我有一个包含菜单栏的所有页面的通用模板，它位于 ng-view 之外。我的一个页面位于<$ c里面$ c> ng-view 我想将输入数据绑定到此模板区域（此区域位于与输入页面不同的控制器下）。我的意思是当我输入名称时，名称将显示为模板区域。有可能吗？
以下是
$ rootScope存在，但它可以用于邪恶
AngularJS中的作用域形成一个层次结构，原型继承自树顶部的根作用域。通常这可以忽略，因为大多数视图都有一个控制器，因此也有一个自己的范围。
偶尔会有一些数据需要全局化整个应用程序。对于这些，您可以注入
$ rootScope并像其他任何范围一样设置值。由于范围继承自根范围，因此这些值可用于附加到指令的表达式，如ng-show，就像本地$上的值一样范围。
当然，全球州很糟糕，你应该谨慎使用
$ rootScope就像你（希望）在任何语言中使用全局变量一样。特别是，不要将它用于代码，只用于数据。如果你想在$ rootScope上添加一个函数，那么将它放在一个可以在需要的地方注入并且更容易测试的服务几乎总是更好。
相反，不要创建一个服务，其唯一目的就是存储和返回数据位。
- AngularJS常见问题 -
$ rootScope存在，但它可以用于邪恶
I have a general template for all pages which contains a menu bar and it is outside the ng-view.From one of my page which is inside the ng-view i want to bind input data to this template area(this area is under a different controller than the input page).I mean when i will enter name,the name will appear to the template area.Is it possible ?
Here is the 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>
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
<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?
The DEMO on PLNKR
$scope.obj is working like a $rootScope variable. Is it for prototypal inheritance?
Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Each AngularJS application has exactly one root scope, but may have any number of child scopes.
ng-app --> $rootScope
|- ng-controller --> $scope (container)
|- ng-view --> $scope (view)
By using: <input ng-model="obj.name" /> the ng-model directive in the view controller uses prototypical inheritance to find $scope.obj from outside the view. It can then get and set the name property of that object.
For more information, see AngularJS Developer Guide - Scope Hierarchies
$rootScopeexists, but it can be used for evilScopes 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.
Occasionally there are pieces of data that you want to make global to the whole app. For these, you can inject
$rootScopeand 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 likeng-showjust like values on your local$scope.Of course, global state sucks and you should use
$rootScopesparingly, 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$rootScope, it's almost always better to put it in a service that can be injected where it's needed, and more easily tested.Conversely, don't create a service whose only purpose in life is to store and return bits of data.
— AngularJS FAQ -
$rootScopeexists, but it can be used for evil
这篇关于在Ang-view之外绑定Angularjs数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
