1、$scope.$apply的使用,源生跟angular的结合使用,如果没有使用$timeout,则使用$scope.$apply,这样操作$scope下面的变量值的变化,界面上对应的值才会有相应的变化;
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="Aaa">
<span>{{name}}</span>
</div>
<script>
var m1 = angular.module('myApp', []);
m1.controller('Aaa', ['$scope',function($scope) {
$scope.name = 'Hello aaa';
setTimeout(function() {
$scope.$apply(function() {//用这个跟第三方库或者源生一起使用的时候,里面的变量是可以被监听到的
$scope.name = "变变变";
});
},5000);
}]);
</script>
</body>
</html>
2、angular.injector(后续再补充);
3、run方法的操作:代码如下
run的作用,相当于去初始化一些全局的数据,省略了控制器的环节,就可以直接把值挂载到全局作用域下
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular.min.js"></script>
</head>
<body>
<div>
<span>{{name}}</span>
</div>
<script>
var m1 = angular.module('myApp', []);
m1.run(['$rootScope','$timeout', function($rootScope, $timeout) {
$rootScope.name = "pomotodo";
$timeout(function (){
$rootScope.name = "变变变";//
},5000);
}]);//可以console.log(m1);看看什么样的情况
</script>
</body>
</html>
4、angular.bootstrap方法的使用:动态启用angular应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular.min.js"></script>
</head>
<body>
<!-- <div ng-controller="Aaa">
<span>{{name}}</span>
</div> -->
<!-- <div ng-controller="Bbb">
<span>{{name}}</span>
</div> -->
<div>
<span>{{name}}</span>
</div>
<script>
var m1 = angular.module('myApp', []);
m1.run(['$rootScope','$timeout', function($rootScope, $timeout) {
$rootScope.name = "pomotodo";
$timeout(function (){
$rootScope.name = "变变变";
},5000);
}]);
document.onclick = function() {
angular.bootstrap(document, ['myApp']);
}
</script>
</body>
</html>