angular-day12-$transclude

发表于 | 分类于 ，

transclusion

transclude 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
79
80
81
82
83
<!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'>
        <div msg2>this is body stuff</div>
        <div msg2>this is body stuff222</div>
        <div msg3>this is body stuff3333</div>
        <msg4  my-clude>this is body stuff44444444</msg4>
    </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: 'trans1.html'
        }
    });
    module.directive('msg2', function () {
        return {
            templateUrl: 'trans2.html',
            transclude: true
        }
    });
    module.directive('msg3', function () {
        return {
            templateUrl: 'trans3.html',
            transclude: true,
            // link : function(scope, iElement, iAttrs, controller, transclude){ 
            //     var content = transclude();
            //     iElement.find("p").append(content);
            // } 
            // 这也行
            controller: function ($scope, $element, $attrs, $transclude) {
                var content = $transclude();
                $element.find("section").append(content);
            }
        }
    });
    module.directive('msg4', function () {
        return {
            templateUrl: 'trans4.html',
            transclude: true
        }
    });
    module.directive('myClude', function () {
        return {
            link: function (scope, iElement, iAttrs, controller, transclude) {
                var content = transclude();
                iElement.find("section").append(content);
                debugger    
            }
        }
    });
    module.run(function ($templateCache) {
        $templateCache.put('trans1.html', "<div>no transclusion</div>");
        $templateCache.put('trans2.html', '<div>a +++ b ' +
            '<div ng-transclude >directive</div> </div>');
        $templateCache.put('trans3.html', '<div>trans3.html ' +
            '<section id=pid>directive</section> </div>');
        $templateCache.put('trans4.html', '<div>trans4.html ' +
            '<section id=pid></section> </div>');
    });
</script>
</html>

transclude function

demo code

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.js"></script>
</head>
<body ng-app='myapp'>
    <div msg> esefffffffff</div>
</body>
<script type="text/javascript">
    var module = angular.module('myapp', [ ]);
    module.controller('ctrl', function ($scope, $parse, $interpolate) {
    });
    module.directive('msg', function () {
        return {
            templateUrl: 'templateId.html',
            transclude : true,
            controller: function ($scope, $element, $attrs,$transclude) {
                // var cont = $transclude();
                // $element.find('span').append(cont);
                // $element.find('em').append(cont);
                // with call back
                $transclude(function(transEle){
                    $element.find('span').append(transEle);
                });
                $transclude(function(transEle){
                    $element.find('em').append(transEle);
                });
            }
        }
    });
    module.run(function ($templateCache) {
        $templateCache.put('templateId.html', '<div><em style="color:#1f6"></em> '
        +'<br><span style="color:#a56"></span> </div>');
    });
</script>
</html>

transclusion scope

transclusion scope with shared scope

transclusion scope with inherited scope/isolated scope

transclude scope / custom transclude 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
79
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.js"></script>
</head>
<body ng-app='myapp'>
    <div ng-controller="ctrl">
        controller a{{a}} b{{b}}
        <div msg> transclude a{{a}} b{{$parent.b}}</div>
        <hr>
        <div msg2> transclude a{{a}} b{{b}}</div>
        <hr>
        <div msg3> transclude a{{a}} b{{b}}</div>
    </div>
</body>
<script type="text/javascript">
    var module = angular.module('myapp', []);
    module.controller('ctrl', function ($scope, $parse, $interpolate) {
        $scope.a = 3;
    });
    module.directive('msg', function () {
        return {
            templateUrl: 'isolate.html',
            transclude: true,
            scope: {},
            controller: function ($scope, $element, $attrs, $transclude) {
                $scope.a = 1; $scope.b = 2
            }
        }
    });
    module.directive('msg2', function () {
        return {
            templateUrl: 'templateId.html',
            transclude: true,
            scope: {},
            controller: function ($scope, $element, $attrs, $transclude) {
                $scope.a = 1; $scope.b = 2
                $transclude(function (transEle, $transope) {
                    $transope.a = 33;
                    $transope.b = $scope.b;
                    $element.find('span').append(transEle);
                });
            }
        }
    });
    module.directive('msg3', function () {
        return {
            templateUrl: 'templateId.html',
            transclude: true,
            scope: {},
            controller: function ($scope, $element, $attrs, $transclude) {
                $scope.a = 1; $scope.b = 2
                var custScope = $scope.$new(true);//create a isolate scope
                custScope.a = 66; 
                custScope.b = 67; 
                
                $transclude(custScope,function (transEle) {
                    $element.find('span').append(transEle);
                });
            }
        }
    });
    module.run(function ($templateCache) {
        $templateCache.put('isolate.html', '<div>directive a{{a}} b{{b}} <br><i ng-transclude></i> </div>');
        $templateCache.put('templateId.html', '<div><span style="color:#a56"></span> </div>');
    });
</script>
</html>