Question

因此我们可以像我们一样在角度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变量？

Answer 1

You do not need to specify $rootScope in html. You can use it the same way as you use $scope variables

Just update from

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

to

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

Answer 2

这应该有效：

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

Answer 3

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

$scope.global = $rootScope;

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

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

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

Answer 4

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

Angular 1.x 世界中的任何视图都会自动生成，默认情况下会从某些内容扩展新的 $ 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来解释一下！

Answer 5

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

我的代码如下：

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

在我的html中使用rootScope变量

5 个答案: