angular_$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>

  

posted @ 2014-04-11 17:03  方方和圆圆  阅读(964)  评论(0编辑  收藏  举报

再过一百年, 我会在哪里?