在我的 html 中使用 rootScope 变量答案

【问题标题】：Use rootScope variables in my html在我的 html 中使用 rootScope 变量
【发布时间】：2015-07-29 17:57:27
【问题描述】：

所以我们可以像这样在 Angular 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变量吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

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

刚刚更新

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

到

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

【讨论】：

谢谢 nikhil 我不知道！马上就可以测试了！ :) 如果我想从$route.current.params 内联变量，这同样适用吗？
非常感谢尼基尔！
哦忘了作用域继承了，这样更好
很好的答案。完美运行。
如果这回答了您的问题，感谢@nikhil 的最佳方式就是接受它作为奖励他努力的答案。

【解决方案2】：

这应该可行：

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

【讨论】：

谢谢 Gpicazo！对{{$route.current.params}} 有同样的工作吗？
@yatg 我不这么认为。但是，您可以 (1) 将 $stateParams 注入控制器 (2) 设置范围变量，例如 $scope.param = $stateParams.param; (3) 在视图中绑定作用域变量：{{param}}。
解释见stackoverflow.com/questions/22216441/…
这是唯一对我有用的解决方案。如果没有$root，则无法从 DOM 访问变量后缀。
@mjoyce91 - 我很高兴它有帮助:)

【解决方案3】：

您可以在控制器中注入$rootScope，然后将其映射到这样的范围变量

$scope.global = $rootScope;

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

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

您必须小心不要将内容无用地放入 $rootScope，因为这不是调整代码的最佳做法

【讨论】：

【解决方案4】：

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

Angular 1.x 世界中的任何 View 都会自动拥有一个新的 $scope，这样的 $scope 将从某些东西中扩展而来称为 $rootScope，因此本地 $scope 将继承 $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>

请检查这个Plunker，它解释了这一点！

【讨论】：

【解决方案5】：

在我的情况下，它不能直接使用 rootscope 变量。我不得不将它与 $root 一起使用。

我的代码如下所示：

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

【讨论】：