angular_$attrs

?
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>
            无标题文档
        </title>
        <script src="http://localhost:81/js/jquery.js">
        </script>
        <script src="http://localhost:81/js/angular.min.js">
        </script>
    </head>
     
    <body ng-app="Demo">
        <div a>
            a_directive
        </div>
        <div ng-controller="TestCtrl">
            <h1 t>
                原始内容
            </h1>
            <h2 t2>
                原始内容
            </h2>
            <h3 t3="hiphop" title2="{{name}}">
                原始内容
            </h3>
            <div compile></div>
            <div>
                <test a="{{ a }}" b c="xxx"></test>
                 
                <button ng-click="a=a+1">
                    修改
                </button>
            </div>
            <te a="1" ys-a="123" ng-click="show(1)">这里</te>
        </div>
        <script>
            var app = angular.module('Demo', [], angular.noop);
            app.controller("TestCtrl",
            function($scope) {
                $scope.name = "qihao";
            });
            app.directive("t",
            function() {
                return {
                    controller : function($scope){$scope.name = "qq"},
                    template : "<div>test:implementToParent{{name}}</div>",
                    replace : true,
                    scope : true     //作用域是继承的,默认就是继承的
                }
            });
            app.directive("t2",
            function() {
                return {
                    controller : function($scope){$scope.name = "nono"},
                    template : "<div>test:implementToParent{{name}}</div>",
                    replace : true,
                    restrict : "AE"
                }
            });
            app.directive("t3",
            function() {
                return {
                    template : "<div>test:implementToParent_titleIs:{{title}}<br>title2Is:{{title2}}</div>",
                    replace : true,
                    restrict : "AE",
                    scope : {
                        title : "@t3",
                        title2 : "@title2"
                    }
                }
            });
            app.directive('a',
            function() {
                var func = function() {
                    console.log('compile');
                    return function() {
                        console.log('link');
                    }
                }
 
                var controller = function($scope, $element, $attrs, $transclude) {
                    //$transclude ：是指令标签的复制体
                    console.log('controller');
                    console.log($scope);
                    console.log($transclude);
                    //$transclude接受两个参数，你可以对这个克隆的元素进行操作，
                    var node = $transclude(function(clone_element, scope) {
                        $element.append(clone_element);
                        $element.append("<span>spanTag___</span>");
                        console.log(clone_element);
                        console.log('--');
                        console.log(scope);
                    });
                    console.log(node);
                }
 
                return {
                    compile: func,
                    template: "<h1 ng-transclude></h1>",
                    controller: controller,
                    transclude: true,
                    restrict: 'AE'
                }
            });
            app.directive('compile',function() {
                var func = function() {
                    console.log('a compile');
                    return {
                        pre: function() {
                            console.log('a link pre')
                        },
                        post: function() {
                            console.log('a link post')
                        },
                    }
                }
                return {
                    restrict : "AE",
                    compile : func
                }
            })
               
              app.directive('test', function(){
                var func = function($element, $attrs){
                  console.log($attrs);
               
                  $attrs.$observe('a', function(new_v){
                    console.log(new_v);
                  });
                }
               
                return {compile: func,
                        restrict: 'E'}
              });
               
              app.controller('TestCtrl', function($scope){
                $scope.a = 123;
              });
               
              app.directive('te', function(){
                var func = function($scope,$element, $attrs,$ctrl){
                    console.log($ctrl)
                    //$attrs.$set. 给这个属性设置b，值为ooo，就是这样
                  $attrs.$set('b', 'ooo');
                  $attrs.$set('a-b', '11');
                  //这个还有点不懂啊 //第二个参数值
                  $attrs.$set('c-d', '11', true, 'c_d');
                  console.log($attrs);
                }
               
                return {
                        compile: function(){
                            return func
                        },
                        restrict: 'E'
                    }
              });
               
              app.controller('TestCtrl', function($scope){
                $scope.show = function(v){console.log(v);}
              });
        </script>
    </body>
 
</html>

　　

本文作者：方方和圆圆

本文链接：https://www.cnblogs.com/diligenceday/p/3659080.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   方方和圆圆  阅读(965)  评论(0)  编辑  收藏  举报

再过一百年， 我会在哪里？

💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起
点击右上角即可分享
微信分享提示
AI IDE Trae