您的位置：首页 > Web前端 > AngularJS
angularJS 中$attrs方法使用指南

2015-02-09 00:00 1416 查看
这里给大家分享的是一个angularJS 中$attrs方法的使用示例：
<!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>
本文内容就到这里了，希望大家能对angularJS 中$attrs的使用有了新的认识，希望大家能够喜欢本文。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： AngularJS
相关文章推荐
新的分享
章节导航