源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AnjularJS中$scope和$rootScope的区别小结

  • 时间:2021-08-09 12:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AnjularJS中$scope和$rootScope的区别小结
[b]一句话总结:[/b]      $rootScope针对全局的作用域生效      $scope只针对当前的controller作用域生效 [b]用下面的例子来证明上述的说法:[/b] [b]定义一个模块名为myApp[/b]
var myApp = angular.module('myApp', []);
[b]创建oneController和twoController这两个controller[/b] [b]oneController传入$scope和$rootScope[/b]
myApp.controller('oneController', ['$scope', '$rootScope', function ($scope, $rootScope) {
 // 局部的变量,只有在oneController中才会显示
 $scope.one_language = 'Python';

 // 全局的变量,都可以调用
 $rootScope.language = 'Go';
}]);
[b]twoController只传入$scope[/b]
myApp.controller('twoController', ['$scope', function ($scope) {
 // 局部的变量,只有在twoController中才会显示
 $scope.two_language = 'Java';
}]);
[b]HTML标签内容[/b]
<span ng-app="myApp">
  <style>
    div{margin-top: 15px;border: 2px solid rebeccapurple;width: 400px;}
  </style>
  <div>
    <h3>我是全局变量language: {{ language}}</h3>
  </div>
  <div ng-controller="oneController">
    <h3>我是one_language局部变量: {{ one_language}}</h3>
  </div>
  <div ng-controller="twoController">
    <h1>twoController</h1>
    <h3>我是two_language局部变量: {{ two_language }}</h3>
    <h3>我是one_language局部变量: {{ one_language}}</h3>
    <h3>我是全局变量language: {{ language }}</h3>
  </div>
</span>
[b]显示的结果[/b] [img]http://files.jb51.net/file_images/article/201609/2016918103818379.png?2016818103830[/img] [b]总结[/b] 以上就是这篇文章的全部内容,请仔细看看上面的代码,这有助于你理解。如果有疑问大家可以留言交流,谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部