在我的html中使用rootScopevariables

所以我们可以像这样轻松地在我们的angular html中使用scopevariables:

<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> 

举个例子:

 <h1>Hello {{yourName}}!</h1> 

正在使用yourName希望做的范围中的yourName

 <h1>Hello {{yourName}} you are in in {{$rootScope.zoneName}}!</h1> 

是否有可能像这样带来$rootScopevariables?

你不需要在html中指定$rootScope 。 您可以像使用$scopevariables一样使用它

只是从更新

 <h1>Hello {{yourName}} you are in in {{$rootScope.zoneName}}!</h1> 

 <h1>Hello {{yourName}} you are in in {{zoneName}}!</h1> 

这应该工作:

 <h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1> 

您可以在您的控制器中注入$rootScope ,然后将其映射到像这样的作用域variables

$scope.global = $rootScope;

然后在你的模板中,你可以使用

<p>$rootscope value of name is {{ global.name }}.</p>

你必须小心,不要无用地把东西放到$rootScope因为它不被认为是调整你的代码的最佳实践

我知道这是晚了,但需要一个很好的解释!

Angular 1.x世界中的任何视图都会自动创build,默认情况下, $ scope这个$ scope将被扩展到$ rootScope,所以本地$ scope将inheritance$ rootScope存储的所有东西,并且会拥有它自己的版本的数据。

因此,如果您在$ rootScope级别中有任何信息,那么默认情况下会有该信息,因此您的视图可以使用通常的插值直接访问它。

这行代码将显示如何!

 var app = angular.module('plunker', []); app.run(function($rootScope) { $rootScope.persons = [ { name : "Houssem", role : "Developer Advocate" }, { name: "Clark", role: "Developer" } ]; }) app.controller('MainCtrl', function($scope) { $scope.greetings = 'Hello World !'; }); 

这在索引页面上:

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script> <script data-require="ui-router@1.0.0-alpha.5" data-semver="1.0.0-alpha.5" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>{{greetings}}</p> <ul> <li ng-repeat="person in persons"> <p>{{person.name}} - {{person.role}}</p> </li> </ul> </body> </html> 

请检查一下这个解释器!