在anjular中 function中的$scope和$rootscope有啥区别

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在anjular中 function中的$scope和$rootscope有啥区别相关的知识，希望对你有一定的参考价值。

　　scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链 。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。

　　$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。


　　scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用





 

示例1：

// 新建一个模块
var module = angular.module("app",[]);

// true说明$rootScope确实以服务的形式包含在模块的injector中
var hasNgInjector = angular.injector(['app','ng']);  
console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true

// 获取模块相应的injector对象,不获取ng模块中的服务
// 不依赖于ng模块,无法获取$rootScope服务
var noNgInjector = angular.injector(['app']);
console.log("no $rootScope=" + noNgInjector.has("$rootScope"));//false

// 获取angular核心的ng模块
var ngInjector = angular.injector(['ng']);  
console.log("ng $rootScope=" + ngInjector.has("$rootScope"));//true

上面的代码的确可以说明： $rootScope的确是由核心模块ng创建的，并以服务的形式存在于injector中 。
如果创建injector的时候，指定了ng模块，那么该injector中就会包含$rootScope服务；否则就不包含$rootScope。

示例2：
<!doctype html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <script src="angular-1.2.25.js"></script>
     <script>
    
    var module = angular.module("app",[]);
    // 控制器里的$injector,是由angular框架自动创建的
    function FirstController($scope,$injector,$rootScope)
    
      $rootScope.name="aty";
    
    
    //自己创建了个injector,依赖于app和ng模块
    var myInjector = angular.injector(["app","ng"]);
    var rootScope = myInjector.get("$rootScope");
    alert(rootScope.name);//udefined
        
     </script> 

  </head>
  
  <body ng-app="app">
    <div id="first" ng-controller="FirstController">
      <input type="text" ng-model="name">
      <br>
      name
    </div>
  </body>
  
</html>
angular.injector()可以调用多次，每次都返回新建的injector对象 。所以我们自己创建的myInjector和angular自动创建的$injector不是同一个对象，那么得到的rootScope也就不是同一个。





示例3：
<!doctype html>
<html lang="en">
  <head>
     <script src="angular-1.2.25.js"></script>
     <script>
    
    function FirstController($scope,$injector,$rootScope)
    
      // true
      console.log("scope parent :" + ($scope.$parent ==$rootScope));
    
  
     </script> 
  </head>
  
  <body ng-app>
    <div id="first" ng-controller="FirstController">
      <input type="text" ng-model="name">
      <br>
      name
    </div>
  </body>
  
</html>
ng-controller指令给所在的DOM元素创建了一个新的$scope对象,并作为rootScope的子作用域 。$scope是由$rootScope创建的，$scope不会保护在$injector中。
示例4：
<!doctype html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <title>scope()</title>
     <script src="jquery-1.11.1.js"></script>
     <script src="angular-1.2.25.js"></script>
     
     <script>
      
    //记住rootScope，用来判断跨控制器是否相等
    var first_rootScope = null;
    //记住scope，用来判断跨控制器是否相等
    var first_scope = null;
    //记住injector，用来判断跨控制器是否相等
    var first_injectot = null;
    
    // 第1个angular控制器
    function FirstController($scope,$injector,$rootScope)
    
      $rootScope.name = "aty";
      first_rootScope = $rootScope;
      first_injectot = $injector;
      first_scope = $scope;
    
    
    
    // 第2个angular控制器,主要是来测试跨controller时injector和scope的表现
    function SecondController($scope,$injector,$rootScope)
    
      console.log("first_rootScope==second_rootScope:" + (first_rootScope==$rootScope));//true
      console.log("first_injectot==second_injector:" + (first_injectot==$injector));//true
      console.log("first_scope==second_scope:" + (first_scope==$scope));//false
    
     
     </script> 

  </head>
  
  <body ng-app>
    <div id="first" ng-controller="FirstController">
      <input type="text" ng-model="name">
      <br>
      <div id="tips"></div> 
    </div>
    
    <h2>outside of controller</h2>
    
    <br>
    <!--访问每一个应用(模块)的rootScope-->
    $root.name
    <div id="noControllerDiv"/>
    
    <div ng-controller="SecondController">
      
    </div>
    
    
  </body>
  
</html>






ng-app定义了一个angular模块， 每个模块只有一个$rootScope，只有一个$injector，但可以有多个$scope 。

弄清了 $injector、$rootScope和$scope这3者之间的关系，我们看下angular提供的2个API，一个是scope()，一个是injector()。使用 angular.element()返回的DOM对象，都会包含这2个方法，用来获取与之关联的scope和injector。
由于每个模块的injector是唯一的，所以 angular.element().injector()直接返回元素所在模块的injector 。
angular.element().scope()可以获取到当前元素的scope或父scope。如果当前元素有scope，则返回自己的scope;如果没有则向父亲方向寻找,如果找不到返回rootScope。即 返回作用域链上，距离该元素最近的scope 。




<!doctype html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <title>scope()</title>
     <script src="jquery-1.11.1.js"></script>
     <script src="angular-1.2.25.js"></script>
     
     <script>

    function FirstController($scope,$injector,$rootScope)
    
      //获取body对象
      var domBody = document.getElementsByTagName('body')[0];
      
      // 通过ng-app指令所在的DOM元素获取rootScope
      var rtScope = angular.element(domBody).scope();
      
      //当前元素没有新作用域,获取父作用域即rootScope
      var noScope = angular.element("#noControllerDiv").scope();
      
      // true
      console.log("rtScope==noScope:" + (rtScope==noScope));
      
      //ng-controller所在的元素,返回的scope
      var scopeOnController = angular.element("#first").scope();
      
      // ng-controller内部的元素返回所在的scope
      var inController = angular.element("#tips").scope();
      
      //true
      console.log("scopeOnController==inController:" + (scopeOnController==inController));
      
      //验证通过DOM获取的scope是否与注入的$scope和$rootScope一致
      //true
      console.log("result1:" + (rtScope==$rootScope));
      //true
      console.log("result2:" + (inController==$scope));

    
     
     </script> 

  </head>
  
  <body ng-app>
    <div id="first" ng-controller="FirstController">
      <input type="text" ng-model="name">
      <br>
      <div id="tips"></div> 
    </div>
    
    <h2>outside of controller</h2>
    
    <br>
    <!--访问每一个应用(模块)的rootScope-->
    $root.name
    <div id="noControllerDiv"/>
    
  </body>
  
</html>

 参考技术A scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链 。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。
$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用 参考技术B scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。下面用实例详细的说明一下。
​
phonecatApp.controller('TestCtrl',['$scope','$rootScope',
function($scope,$rootScope)
$rootScope.name = 'this is test';

]);
phonecatApp.controller('Test111Ctrl',['$scope','$rootScope',
function($scope,$rootScope)
$scope.name = $rootScope.name;

]);

<div ng-controller="TestCtrl">
Iset the global variable.<strong>$root.name</strong>
</div>
<div ng-controller="Test111Ctrl">
1,get global variable .<strong>name</strong><br>
2,get global variable .<strong>$root.name</strong>
</div>www.111cn.net

3，显示结果

I set the global variable.this is test
1,get global variable .this is test
2,get global variable .this is test

由结果可以看出来，$rootScope.name设置的变量，在所有controller里面都是可以直接用$root.name来显示的，很强大。那当然也可以赋值给scope.本回答被提问者和网友采纳

swift如何在anjular呈现页面后执行javascript？

【中文标题】swift如何在anjular呈现页面后执行javascript？【英文标题】：swift how to execute javascript after anjular have rendered the page? 【发布时间】：2017-04-26 08:08:29 【问题描述】：

在我的 ios 应用程序中，我使用 WKWebview.evaluateJavaScript() 来执行 javascript 以获取 div boundingRect。在我的网页中，我使用 anjularjs 来渲染我的部分页面，页面内容如下，

  <body ng-app="home" ng-controller="HomeController" style="min-height:700px;">
    <printerinfo></printerinfo>
  </body>
  <div id="movie" style="border: 1px grey dotted; width: 120px; height: 90px;"></div>

迅速

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 
    self.wk.evaluateJavaScript("var rect = document.getElementById('movie').getBoundingClientRect(); [rect.x, rect.y, rect.width, rect.height, rect.top, rect.right, rect.bottom, rect.left];")  (result, error) -> Void in
        print(result)

从结果来看，

Optional(<__NSArrayM 0x170251010>(
<null>,
<null>,
120,
90,
0,
120,
90,
0
)
)

boundingRect 位于视口的原点，看起来 body 在视口中没有空间。我以为是因为网页加载的时候，angualrjs没有渲染body部分。

那么如何在 anjularjs 用 swift3 渲染页面后执行 javascript 呢？

非常感谢。

【问题讨论】：

查看此帖子***.com/a/43672099/6521116的答案***.com/q/28149097/6521116 【参考方案1】：

而且我认为使用原生 swift 或 Objective-c 来检测页面何时加载是一个糟糕的选择。更灵活有效的方法是在页面加载完成时使用javascript调用原生的swift代码。更重要的是，这也适用于特定的 dom 完成加载事件和非常动态的内容。

详情请参阅此post。

【讨论】：

以上是关于在anjular中 function中的$scope和$rootscope有啥区别的主要内容，如果未能解决你的问题，请参考以下文章

前端开发环境搭建 grunt bowerrequirejs anjular

Anjular JS 的一些运用

anjular js 表达式

Anjular+Bootstrap前端开发案例实战

anjular2以及微信小程序的一点比较

如何在Angular js中的http请求中发送标头数据