在 html 中使用 rootScope 变量

因此，我们可以很容易地在角 HTML 中使用范围变量，如下所示:

<!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:

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

有没有可能把 $rootScope变量像这样放进去？

103012 次浏览
小开

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

最新消息

<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，然后将其映射到一个范围变量，如下所示

$scope.global = $rootScope;

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

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

您必须小心，不要无用地将内容放入 $rootScope中，因为它不被认为是调整代码的最佳实践

小开

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

在 角度1. x世界中的任何视图都会自动地，默认情况下，一个新的 $范围这样的 $范围将从所谓的 $rootScope扩展，所以本地 $范围将继承 $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>

请检查一下这个 笨蛋，它正好解释了这一点！

小开

在我的例子中，它不能直接使用 rootscope变量，我只能使用 $root。

我的代码如下:

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

提交答案