在我的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>
是否有可能像这样带来$rootScope
variables?
你不需要在html中指定$rootScope
。 您可以像使用$scope
variables一样使用它
只是从更新
<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>
请检查一下这个解释器!