发表新帖
发表新帖

Use rootScope variables in my html

前端 未结
关注
5 1031
我寻月下人不归
我寻月下人不归 2020-12-24 10:16

So we can use scope variables in our angular html easily like this:
相关标签:
5条回答
  • 灰色年华
    2020-12-24 10:54

    This should work:

    <h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>
    0 讨论(0)
  • 情话喂你
    2020-12-24 10:58

    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>
    0 讨论(0)
  • 长发绾君心
    2020-12-24 10:58

    I know this is late, But a good explanation is needed !

    Any View in Angular 1.x world will have automatically and by default a new $scopesuch $scope will be extended from something called the $rootScope so the local $scope will inherit everything that the $rootScope is storing and will have it's own version of the that data.

    So if you have any information in the $rootScope level you will have it by default and so your view can access it directly using usual interpolation.

    This line of code will show the how too !

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

    And this on the Index page : 

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

    And please check This Plunker which explain just that !

    0 讨论(0)
  • 一向
    2020-12-24 11:00

    you could inject $rootScope in you controller and then map it to a scope variable like this

    $scope.global = $rootScope;

    then in your template you could use

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

    You have to be careful to not uselessly put thing into the $rootScope as it's not considered the best practice to modulate your code

    0 讨论(0)
  • 耶瑟儿～
    2020-12-24 11:02

    In my case it was not working with using rootscope variables directly. I had to use it with $root.

    my code looks like below:

    <h1>you are in in {{$root.zoneName}}!</h1>
    0 讨论(0)
 看不清?
提交回复
热议问题