Angularjs 在我的html中使用rootScope变量_Angularjs

Angularjs 在我的html中使用rootScope变量

angularjs

Angularjs 在我的html中使用rootScope变量,angularjs,Angularjs,因此，我们可以像这样轻松地在我们的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> &

因此，我们可以像这样轻松地在我们的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>

是否可以像这样引入

$rootScope

变量？

您不需要在html中指定

$rootScope

。您可以使用与使用

$scope

变量相同的方法来使用它

只需更新

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

Hello{{yourName}您在{{$rootScope.zoneName}中！

到

你好{{{yourName}}你在{{{zoneName}}！

这应该可以：

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

你好{{yourName}}你在{{$root.zoneName}中！

您可以在控制器中注入

$rootScope

，然后将其映射到如下范围变量

$scope.global=$rootScope
然后在模板中，您可以使用
$rootscope name的值为{{global.name}。

您必须小心不要无用地将东西放入$rootScope
中，因为它被认为不是调整代码的最佳实践我知道这已经晚了，但是需要一个好的解释
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>


安古拉斯普朗克
{{问候}


{{person.name}-{{person.role}



请检查一下这个，解释一下
 在我的例子中，它不能直接使用rootscope
变量。我不得不将它与$root一起使用
我的代码如下所示：
<h1>you are in in {{$root.zoneName}}!</h1>

您在{{$root.zoneName}中！
谢谢你nikhil我不知道！马上就要测试了！：）如果我想从$route.current.params
内联变量，这同样适用吗？非常感谢nikhil！哦，忘了范围继承，这是更好的答案。很好用。如果这回答了你的问题，那么感谢@nikhil的最好方式就是接受它作为对他努力的回报。谢谢你Gpicazo！对于{{$route.current.params}
？@yatg我不这么认为。但是，您可以（1）将$stateParams注入控制器（2）设置一个作用域变量，如$scope.param=$stateParams.param；和（3）绑定视图中的scope变量：{{param}。请参阅以了解解释这是唯一对我有效的解决方案。在没有$root@mjoyce91的情况下无法从DOM访问变量后缀-我很高兴它有帮助：）
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>

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