<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{name}} {{age}} {{sex}} <div ng-controller="secondController"> {{name}} {{age}} {{sex}} //secondController作用域先在自己作用域查找，然后再去firstController查找，firstController也没有就去rootScope查找。 </div> </div> {{name}} {{age}} {{sex}} </div> <script type="text/javascript"> var app = angular.module("myApp", []); //代码压缩不会把字符串压缩，只会把函数的形参压缩，因此前面写全，后面可以简写。 app.controller('firstController',['$scope',function($s){ $s.name='张三2'; }]); app.controller('secondController',['$scope','$rootScope',function($s,$r){ $s.name='李四'; $r.age='30'; }]); app.run(['$rootScope',function($r){ $r.name='ggggg'; $r.age='3333'; $r.sex='男'; }]); console.log(app); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{name}} {{age}} </div> <div ng-controller="secondController"> {{name}} {{age}} </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller('firstController',function($scope){ $scope.name='张三'; }); app.controller('secondController',function($scope,$rootScope){ // $scope.name='李四'; $rootScope.age='30'; }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../../angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{name}} </div> <div ng-controller="secondController"> {{name}} </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller('firstController',function($scope){//scope的作用域是controller作用域 $scope.name='张三'; }); app.controller('secondController',function($scope){ $scope.name='李四'; }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../../angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> 姓名： {{name}} <br> 年龄：{{age}} </div> <div ng-controller="secondController"> 姓名：{{name}} 年龄：{{age}} </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller('firstController',function($scope,$rootScope){//rootScope作用域是ng-app作用域 $scope.name='张三'; $rootScope.age='30'; }); app.controller('secondController',function($scope){ $scope.name='李四'; }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{name}} {{age}} {{sex}} <div ng-controller="secondController"> {{name}} {{age}} {{sex}} //里层的作用域会去找外层的作用域 </div> </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller('firstController',function($scope){ $scope.name='张三1'; $scope.age='40'; }); app.controller('secondController',function($scope){ $scope.name='李四'; $scope.sex='男'; }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div> <p>{{name}}</p> </div> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello111'; }]); m1.controller('Bbb',['$scope',function($scope){ $scope.name = 'hi'; }]); m1.run(['$rootScope',function($rootScope){ //run方法初始化全局数据，只对全局作用域起作用。 $rootScope.name = 'hello'; }]); console.log( m1 ); </script> </body> </html>