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

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="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>

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