angularJs的作用域和依赖注入

一、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>

 

你可能感兴趣的:(AngularJS)