Использовать переменные rootScope в моем html

Таким образом, мы можем легко использовать переменные области видимости в нашем 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 таким образом?

Ответ 1

Вам не нужно указывать $rootScope в html. Вы можете использовать его так же, как вы используете переменные $scope

Просто обновите

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

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

Ответ 2

Это должно работать:

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

Ответ 3

вы можете ввести $rootScope в свой контроллер, а затем сопоставить его с переменной области видимости, подобной этой

$scope.global = $rootScope;

то в вашем шаблоне вы можете использовать

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

Вы должны быть осторожны, чтобы не бесполезно вставлять вещь в $rootScope, поскольку она не считается лучшей практикой для модуляции вашего кода.

Ответ 4

Я знаю, что это поздно, но нужно хорошее объяснение!

Любой вид в Angular 1.x мир будет автоматически и по умолчанию будет расширен новый $scope такой $scope от того, что называется $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="[email protected]" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
 <script data-require="[email protected]" 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, который объясняет именно это!