在我的HTML中使用rootScope变量

74

因此，我们可以像这样在角度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

— at
source

86

您无需$rootScope在html中指定。您可以使用与使用相同的方式$scope变量

只需更新

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

至

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

— 尼基尔·阿格瓦尔（Nikhil Aggarwal）
source

2

谢谢nikhil，我不知道！马上测试！:)如果我要从中插入变量，是否同样适用$route.current.params？

— 2015年

2

非常感谢nikhil！

— yatg

2

哦，忘记了作用域继承，那就更好了

— zeachco

2

好答案。完美的作品。

— BenRoe '16

1

如果这回答了您的问题，那么感谢@nikhil的最佳方法是接受它作为对他努力的回报。

— 丹尼斯·瓦尼依伊

83

这应该工作：

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

— GPicazo
source

谢谢Gpicazo！woudl同样的工作{{$route.current.params}}？

— yatg

2

@yatg我不相信。但是，您可以（1）将$ stateParams注入到控制器中（2）设置范围变量，例如$ scope.param = $ stateParams.param；（3）在视图{{param}}中绑定范围变量。

— GPicazo

看到stackoverflow.com/questions/22216441/...的解释

— 穆罕默德Hewedy

2

这是唯一对我有用的解决方案。没有则无法从DOM访问变量后缀$root。

— mjoyce91

@ mjoyce91-我很高兴它有所帮助:)

— GPicazo

12

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

Angular 1.x世界中的任何View都将自动具有默认情况下的默认$ scope这样的新$ 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这说明这一点！

— 侯赛姆·亚海圭
source

11

您可以注入$rootScope控制器，然后将其映射到这样的作用域变量

$scope.global = $rootScope;

然后您可以在模板中使用

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

您必须小心，不要无用地放入东西，$rootScope因为这不是调制代码的最佳实践

— zeachco
source

0

就我而言，它无法使用 rootscope直接变量。我必须将其与$ root一起使用。

我的代码如下所示：

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

— Yuvraj Patil
source