2016年4月15日

[TOC]

2016年4月15日

angularjs

自定义指令directive

• transclude

  • ng-transclude

    • 默认为false，可以把其他指令嵌入当中。

• require

  • 把一个指令引入到其他指令，在下面的构造器中就可以使用这个指令构造器当中 的变量。

  • ^

    • 去父级找指令

  • ?

    • 如果不存在 ，不会报错。

var m1 = angular.module('myApp',[]);
m1.directive('hello',function(){
    return {
        restrict:'E',
        replace:true,
        transclude:true, 
        controller:function($scope){
            this.name='niefee,hello';
        },
        template:'<div>nihao,<h1 ng-transclude></h1></div>' 
    };
});

m1.directive('hi',function(){
    return {
        restrict : 'E',   
        replace : true,
        require : '?^hello',    
        template : '<span>hi angular</span>',
        link:function(scope,element,attr,reController){

            console.log(reController.name);
        }
    }
});

<hello>
    <hi></hi>
</hello>

$http服务

• $http

  • method

  • url

  • success

    • data--返回的请求数据。

    • state--返回的状态值

    • headers--

    • config

  • error

  • 简写方式

    • jsonp

    • JSON_CALLBACK

  • 例子 : 百度下拉搜索

/*$http({
        method:'GET',
        url:'data.php',

    }).success(function(data,state,hesders,config){
        console.log(data);
        console.log(state);
        console.log(hesders);
        console.log(config);
    }).error(function(data){
        document.write(data);
    })*/

    $http.get('data.php').success(function(data,stata,headers,config){
        console.log(data);
    })

$location

• absUrl()

  • 绝对地址

• path()

  • 与路由挂钩

• replace()

  • 不会出现历史管理，没有返回。

• hash()

  • 哈希

• search()

• url()

  • 路径、哈希

• host()

  • 主机名

• port()

  • 端口

• protocol()

  • 协议

    //var a = $location.absUrl();
    $location.path('aaa/bbb/ccc').replace();
    $location.hash('hello');
    //$location.search({'age':'20'});
    var a = $location.port();
    //var a = $location.protocol();
    console.log(a);

• $anchorScroll()

  • 例子 : 锚点跳转

<script>

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){

    $scope.change = function(id){

        //console.log(id);
        $location.hash(id);
        $anchorScroll();

    };

}]);

</script>


<div id="parent" ng-controller="Aaa">
    <ul>
        <li ng-repeat="id in [1,2,3,4,5]" ng-click="change('div'+id)">{{id}}aaaaaaaaaa</li>
    </ul>
    <div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
</div>

• $cacheFactory

  • info()

  • put()

  • get()

  • remove()

  • 配置capacity

javascript

节点操作

添加节点

var para=document.createElement("p");
var node=document.createTextNode($scope.arr[i]);
para.appendChild(node);

删除节点

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);