angularJS 中$attrs方法使用指南

前端技术 2023/09/06 JavaScript

这里给大家分享的是一个angularJS 中$attrs方法的使用示例：

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>

本文内容就到这里了，希望大家能对angularJS 中$attrs的使用有了新的认识，希望大家能够喜欢本文。

本文地址：https://www.stayed.cn/item/17119

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案