Verwenden Sie rootScope-Variablen in meinem HTML

73

So können wir Bereichsvariablen in unserem eckigen HTML einfach so verwenden:

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

Also zum Beispiel:

<h1>Hello {{yourName}}!</h1>

Verwendet yourNameaus dem Bereich, den ich mir erhofft hatte:

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

Ist es möglich, $rootScopeVariablen wie diese einzubringen?

angularjs yatg
quelle

Antworten:

85

Sie müssen nicht $rootScopein HTML angeben . Sie können es genauso verwenden wie $scopeVariablen

Einfach aktualisieren von

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

zu

<h1>Hello {{yourName}} you are in in {{zoneName}}!</h1>
Nikhil Aggarwal
quelle
2
Danke Nikil, das wusste ich nicht! Wird sofort testen! :) Gilt das auch, wenn ich Variablen inline von wollte $route.current.params?
Yatg
2
Vielen Dank nikhil!
Yatg
2
Oh,
ich
2
Gute Antwort. Funktioniert perfekt.
BenRoe
1
Wenn dies Ihre Frage beantwortet, können Sie @nikhil am besten danken, indem Sie sie als Antwort akzeptieren, um seine Bemühungen zu belohnen.
Dennis Wanyonyi
82

Das sollte funktionieren:

<h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>
GPicazo
quelle
Vielen Dank, Gpicazo! woudl gleiche Arbeit für {{$route.current.params}}?
Yatg
2
@yatg Ich glaube nicht. Sie können jedoch (1) $ stateParams in den Controller einfügen (2) eine Bereichsvariable wie $ scope.param = $ stateParams.param festlegen; und (3) binde die Bereichsvariable in der Ansicht: {{param}}.
GPicazo
Erklärung finden Sie unter stackoverflow.com/questions/22216441/…
Muhammad Hewedy
2
Dies war die einzige Lösung, die für mich funktioniert hat. Konnte ohne das DOM nicht auf das Variablensuffix zugreifen $root.
mjoyce91
@ mjoyce91 - Ich bin froh, dass es geholfen hat :)
GPicazo
11

Sie können Ihren $rootScopeController einspeisen und ihn dann einer solchen Bereichsvariablen zuordnen

$scope.global = $rootScope;

dann könnten Sie in Ihrer Vorlage verwenden

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

Sie müssen darauf achten, dass Sie nichts unnötig in das $rootScopeProgramm einfügen, da dies nicht als bewährte Methode zum Modulieren Ihres Codes angesehen wird

zeachco
quelle
11

Ich weiß, dass dies spät ist, aber eine gute Erklärung ist erforderlich!

Jede Ansicht in Angular 1.x Welt wird automatisch und standardmäßig ein neuer $ Umfang solchen $ Umfang wird von dem angerufene etwas erweitert wird $ rootScope so die lokale $ scope alles erben wird , dass der $ rootScope speichert und muss seine eigene Version von diesen Daten.

Wenn Sie also Informationen in der $ rootScope- Ebene haben, haben Sie diese standardmäßig und Ihre Ansicht kann mit der üblichen Interpolation direkt darauf zugreifen.

Diese Codezeile zeigt auch das Wie!

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 !';
});

Und das auf der Indexseite: 

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

Und bitte überprüfen Sie diesen Plunker, der genau das erklärt!

Houssem Yahiaoui
quelle
0

In meinem Fall funktionierte es nicht mit der rootscopedirekten Verwendung von Variablen. Ich musste es mit $ root verwenden.

Mein Code sieht wie folgt aus:

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