首页 > web前端 > js教程 > angularJS 中$attrs方法使用指南_AngularJS

angularJS 中$attrs方法使用指南_AngularJS

WBOY
发布: 2016-05-16 16:15:00
原创
1550 人浏览过

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

复制代码 代码如下:



   
       
        <br>             无标题文档<br>        
       
       
   
   
       

            a_directive
       

       

           


                原始内容
           


           


                原始内容
           


           


                原始内容
           


           

           

               
               
           

            这里
       

        <script><br /> var app = angular.module('Demo', [], angular.noop);<br /> app.controller("TestCtrl",<br /> function($scope) {<br /> $scope.name = "qihao";<br /> });<br /> app.directive("t",<br /> function() {<br /> return {<br /> controller : function($scope){$scope.name = "qq"},<br /> template : "<div>test:implementToParent{{name}}</script>
",
                    replace : true,
                    scope : true     //作用域是继承的,默认就是继承的
                }
            });
            app.directive("t2",
            function() {
                return {
                    controller : function($scope){$scope.name = "nono"},
                    template : "
test:implementToParent{{name}}
",
                    replace : true,
                    restrict : "AE"
                }
            });
            app.directive("t3",
            function() {
                return {
                    template : "
test:implementToParent_titleIs:{{title}}
title2Is:{{title2}}
",
                    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("spanTag___");
                        console.log(clone_element);
                        console.log('--');
                        console.log(scope);
                    });
                    console.log(node);
                }
                return {
                    compile: func,
                    template: "

",
                    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);}
              });
       
   

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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板