angular-day11-shared/inherited-$scope

发表于 | 分类于 ，

quick note (parent/child directive context)

  1. shared scope (child directive’s property scope=false) parent/child share the same scope
  2. inherited scope (child directive’s property scope=true) child’s own scope that inherite from parent, and the scope’s property can be overwrite
  3. isolate scope (child directive’s property scope is an object) . And that object has nothing to with parent’s scope

$interpolate, $parse, $eval

  • $eval 调用 $parse
  • $eval&$parse可修改数据, $Interpolate只读
  • $interpolate解析包含表达式\{\{ \}\}的字符串, 可处理过滤器 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="angular.js"></script>
</head>
<body ng-app='myapp'>
	<section ng-controller='ctrl'>
		a: 	<input type="text" ng-model='a' ng-change='update()'> 
		b: {{b}} c: {{c}}
		<button ng-click="demoEval()">eval</button>
		<button ng-click="demoParse()">parse</button>
		<button ng-click="demoInterpolate()">Interpolate</button>
	</section>
</body>
<script type="text/javascript">
	var module = angular.module('myapp', []);
 
	module.controller('ctrl', ['$scope','$parse', '$interpolate',  function($scope,$parse,$interpolate) {
		$scope.a=1;
		$scope.b=2;
		$scope.c=3;
		$scope.demoEval = function(){
			// alert($scope.$eval("a"))
			
			// alert($scope.$eval("a * c", {
			// 	c:5, a:1
			// }));
			
			$scope.$eval(function(scope, local){
				alert(scope.a * local.b)
			},{
				a:3,b:4
			});
		}
		$scope.demoParse = function(){
			var f = $parse('a * b');
			// alert(f($scope))
			// assign
			$parse('c').assign($scope, '33'); // digest process is kicked in
			alert($parse('a*b+c')({
				c:5,a:1,b:2
			}))
		}
		$scope.demoInterpolate = function(){
			alert( $interpolate("Result: {{a * b}} and plus: {{a+b|currency:$}}")({
				a:3,b:7
			}) )
		}
		
	}]);
</script>
</html>

shared/inherited scope(in controllers)

shared scope: parent and child use the same scope

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.js"></script>
</head>
<body ng-app='myapp'>
    <section ng-controller='ctrl'>
        a: {{a}} b: {{b}} c: {{c}} <br>
        <msg></msg>
        <msg></msg>
        <button ng-click="change()">change</button>
    </section>
</body>
<script type="text/javascript">
    var module = angular.module('myapp', [ ]);
    module.controller('ctrl', ['$scope', '$parse', '$interpolate', function ($scope, $parse, $interpolate) {
        $scope.a = 1;
        $scope.b = 2;
        $scope.change = function () {
            $scope.b = 30;
        };
    }]);
    module.directive('msg', function () {
        return {
            templateUrl: 'templateId.html',
            scope: false,
            controller: function ($scope, $element, $attrs) {
                $scope.c = 100;
                $scope.change = function () {
                    $scope.b = 'cccc';
                }
            }
        }
    });
    module.run(function ($templateCache) {
        $templateCache.put('templateId.html', '<div>a = {{a}} b = {{b}} ' +
         '<button ng-click="change()">directive</button> </div>');
    });
</script>
</html>

inherited scope

  • controller 嵌套 controller scope和 directive里scope=true是一样的

  • 都是创建一个inherit parent的scope, child scope有parent scope的方法或属性会shadow parent scope的属性

  • child scope没有的会从parent scope查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.js"></script>
</head>
<body ng-app='myapp'>
    <section ng-controller='ctrl'>
        <input type="text" ng-model="a">        
        a: {{a}} b: {{b}} c: {{c}} <br><br>
        o.p {{o.p}} o.q {{o.q}}   <br>
        <input type="text" ng-model="o.p"> <br>
        <!--<msg></msg>
        <msg></msg>-->
        <button ng-click="change()">change</button>
        <section ng-controller='ctrl2'>
            <br><br>
            <input type="text" ng-model="a"> <!--auto create a for crtl2 scope -->
            a: {{a}} b: {{b}} c: {{c}}  d: {{d}} parent.a {{$parent.a}}<br><br>
            o.p {{o.p}} o.q {{o.q}}   <br> 
            <input type="text" ng-model="o.p"> <br><!--won't auto create object o for crtl2 scope -->
            <button ng-click="change()">change</button>
        </section>
    </section>
</body>
<script type="text/javascript">
    var module = angular.module('myapp', []);
    module.controller('ctrl', ['$scope', '$parse', '$interpolate', function ($scope, $parse, $interpolate) {
        $scope.a = 1;
        $scope.b = 2;
        $scope.o = {
            p:100,
            q:200
        };
        
        $scope.change = function () {
            $scope.b = 30;
        };
    }]);
    module.controller('ctrl2', ['$scope', '$parse', '$interpolate', function ($scope, $parse, $interpolate) {
        $scope.c = 3;
        $scope.d = 4;
        // $scope.o = {
        //     p:2100,
        //     q:2200
        // };
        $scope.change = function () {
            $scope.b = 13;
        };
    }]);
    module.directive('msg', function () {
        return {
            template: "msg :　<dir>a {{a}} b {{b}} <button ng-click='change()'>changeB</button></div>",
            // templateUrl : 'msg.html',
            scope: true,
            controller: function ($scope, $element, $attrs) {
                $scope.c = 100;
                $scope.change = function () {
                    $scope.b = 'cccc';
                }
            }
        }
    });
    module.run(function ($templateCache) {
        $templateCache.put('msg.html', '<div>a = {{a}} b = {{b}} ' +
            '<button ng-click="change()">directive</button> </div>');
    });
</script>
</html>

以下两种情况, 模板声明使用shared scope但是实际使用inherited scope

  • ng-include create it’s own inherited scope (like directive’s scope:true)
1
<div ng-include src ='msg.html'></div>
  • ng-repeat
1
<div msg ng-repeat='i in [1,2,3]'></div>