angularJs的作用域和依赖注入

最新推荐文章于 2024-08-14 15:45:18 发布

dbp5156

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量51

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LO-ME/p/4562424.html

版权

一、angularJs的作用域

　　&scope这是局部作用域，先在局部作用域中找，如果没有就在全局作用域中找

　　 &rootScope这是全局作用域

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>angular概述</title>
<script src="angular.min.js"></script>
<script>
function Aaa($scope,$rootScope){  //加上$rootScope这个可以是age显示出来，相当于全局的作用域
    $scope.name = 'hello';
    $scope.age = '40';
}
function Bbb($scope){
    $scope.name = 'hi';
}
</script>
</head>
<body>
<div ng-controller="Aaa">
    <p>{{name}}</p>
    <div ng-controller="Bbb">
        <p>{{name}}</p>
        <p>{{age}}</p>
    </div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>angular概述</title>
<script src="angular.min.js"></script>
<script>
function Aaa($scope,$rootScope){  //加上$rootScope这个可以是age显示出来，相当于是全局的
    $scope.name = 'hello';
    $scope.age = '40';
    //$rootScope.age = '20';            这个是最终的，如果Bbb下没有这个age，Aaa下也没有的话，那么age就等于这个值，如果这个全局的也没有，那么这个age就真的没有了
}
function Bbb($scope){
    $scope.name = 'hi';
    $scope.age = '30';        //这里也添加一个这个的属性，下面结果是30
}
</script>
</head>
<body>
<div ng-controller="Aaa">
    <p>{{name}}</p>
    
    <div ng-controller="Bbb">
        <p>{{name}}</p>
        <p>{{age}}</p>
    </div>
</div>
</body>
</html>

二、依赖注入

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
    function Aaa($scope,$rootScope){      //这里面的参数必须是这样，不能被修改，这就是依赖注入
        alert(123);
    }
</script>
</head>
<body>
    <div ng-controller="Aaa">
        
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/LO-ME/p/4562424.html

dbp5156

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs的作用域和依赖注入

一、angularJs的作用域　　&scope这是局部作用域，先在局部作用域中找，如果没有就在全局作用域中找　　 &rootScope这是全局作用域<!DOCTYPE HTML><html ng-app><head><meta http-equiv="Content-Type" content="te...
复制链接

扫一扫