2016年4月13日

[TOC]

2016年4月13日

angularjs

angularJs的自定义指令

angular.module
- controller
- run
  - 挂载全局的变量。
- filter
- directive
  - restrict的四种定义方式
    E 只限元素名使用
    A 只限属性使用
    C 只限类名使用
    必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
    M 只限注释使用
    必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
    需要在该实例添加 replace 属性，否则评论是不可见的。
    restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
  - replace
  - template
  - templateUrl

<script>

var m1 = angular.module('myApp',[]);
m1.directive('myHello',function(){
    return {
        restrict : 'AECM',   //区分大小写，而且是可以组合使用的
        replace : true,
        template : '<div>hello angular</div>'
    };
});
m1.controller('Aaa',['$scope',function($scope){
}]);
</script>


<my-hello></my-hello>
<p my-hello></p>
<p class="my-hello"></p>
<!-- directive:my-hello -->

也可以引入外部文件：

m1.directive('myTab',function(){
    return {
        restrict : 'E',   
        replace : true,
        templateUrl : 'temp2.html'
    };
});

directive
- scope
  - 独立作用域true
  - 隔离作用域{}
    在单独的标签里起作用。
    @
    =
    &

m1.directive('myTab',function(){
    return {
        restrict : 'E',   
        replace : true,
        //scope : true,
        //每一个标签元素都可以用ng-init定义独立的作用域。
        scope : {
            myId : '@',
            myName : '=',
            myFn : '&'
        },
        controller : ['$scope',function($scope){
            $scope.name = 'miaov';
        }],
        //引入第三方文件
        templateUrl : 'temp2.html'
    };
});

属性

描述

restrict

决定一个指令可如何被使用（例如元素、属性、CSS class 或注释）。

scope

用于创建一个子 scope 或孤立的 scope 。

template

定义指令的输出内容。可以包含 HTML 、数据绑定表达式，甚至是其它指令。

templateUrl

提供指令所用模版的路径。如果模版被定义在 < script> 内，那它可以包含一个 DOM 元素的 id 。

controller

用于定义和指令模版关联的控制器。

link

用于 DOM 操作任务的函数

其中隔离作用域中的变量绑定到属性名称，属性中的值为字符串值、控制器中的变量或者函数。隔离作用域和属性的之间的绑定策略有如下三种：

@：绑定的属性值为字符串。此时没有与controller交互。
=：绑定的属性值为变量。此时与controller有交互。
&：绑定的属性值为函数。此时与controller有交互。

http://blog.csdn.net/GAMEloft9/article/details/50848016

<script>

var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
    return {
        restrict : 'E',   
        replace : true,
        //scope : true,
        scope : {
            myId : '@',//myId等于my-id,js标识符不支持横线（-），但可以转为驼峰命名法。绑定指定的字符串。
            myName : '=',//解释的是数据，
            myFn : '&'//绑定父级的函数
        },
        controller : ['$scope',function($scope){
            $scope.name = 'miaov';
        }],
        templateUrl : 'temp2.html'
    };
});

m1.controller('Aaa',['$scope',function($scope){

    $scope.name = 'hello';
    $scope.show = function(n){
        alert(n);
    };  
}]);
</script>



<body ng-controller="Aaa">
<!-- 留意传参的两种方式。 -->
<my-tab my-id="div1" my-name="name" my-fn="show('hello')"></my-tab>
<my-tab my-id="div2" my-name="name" my-fn="show(num)"></my-tab>
</body>

tab代码

<div id="{{myId}}">
    <input class="active" type="button" value="1" ng-click="myFn({num:456})">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">{{name}}</div>
    <div>22222222</div>
    <div>33333333</div>
</div>

javascript

valueOf() 函数详解

valueOf()函数返回指定对象的原始值。

对象

返回值

Array

数组实例对象。

Boolean

布尔值。

Date

以毫秒数存储的时间值，从 UTC 1970 年 1 月 1 日午夜开始计算。

Function

函数本身。

Number

数字值。

Object

对象本身。这是默认设置。

String

字符串值。

// Array：返回数组对象本身
var array = ["CodePlayer", true, 12, -5];
document.writeln( array.valueOf() === array ); // true

// Date：当前时间距1970年1月1日午夜的毫秒数
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
document.writeln( date.valueOf() ); // 1376838719230

// Number：返回数字值
var num =  15.26540;
document.writeln( num.valueOf() ); // 15.2654

// 布尔：返回布尔值true或false
var bool = true;
document.writeln( bool.valueOf() === bool ); // true
// new一个Boolean对象
var newBool = new Boolean(true);
// valueOf()返回的是true，两者的值相等
document.writeln( newBool.valueOf() == newBool ); // true
// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
document.writeln( newBool.valueOf() === newBool ); // false

// Function：返回函数本身
function foo(){ 
}
document.writeln( foo.valueOf() === foo ); // true
var foo2 =  new Function("x", "y", "return x + y;");
document.writeln( foo2.valueOf() === foo2 ); // true

// Object：返回对象本身
var obj = {name: "张三", age: 18};
document.writeln( obj.valueOf() === obj ); // true

// String：返回字符串值
var str = "http://www.365mini.com";
document.writeln( str.valueOf() === str ); // true
// new一个字符串对象
var str2 = new String("http://www.365mini.com");
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
document.writeln( str2.valueOf() === str2 ); // false

toString() 函数详解

toString()函数用于将当前对象以字符串的形式返回。

类型

行为描述

Array

将 Array 的每个元素转换为字符串，并将它们依次连接起来，两个元素之间用英文逗号作为分隔符进行拼接。

Boolean

如果布尔值是true，则返回"true"。否则返回"false"。

Date

返回日期的文本表示。

Error

返回一个包含相关错误信息的字符串。

Function

返回如下格式的字符串，其中 functionname 是一个函数的名称，此函数的 toString 方法被调用： "function functionname() { [native code] }"

Number

返回数值的字符串表示。还可返回以指定进制表示的字符串，请参考Number.toString()。

String

返回 String 对象的值。

Object(默认)

返回"[object ObjectName]"，其中 ObjectName 是对象类型的名称。

//数组
var array = ["CodePlayer", true, 12, -5];
document.writeln( array.toString() ); // CodePlayer,true,12,-5

// 日期
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
document.writeln( date.toString() ); // Sun Aug 18 2013 23:11:59 GMT+0800 (中国标准时间)

// 日期2
var date2 = new Date(1099, 7, 18, 23, 11, 59, 230);
document.writeln( date2.toString() ); // Fri Aug 18 1099 23:11:59 GMT+0800 (中国标准时间)

// 数字
var num =  15.26540;
document.writeln( num.toString() ); // 15.2654

// 布尔
var bool = true;
document.writeln( bool.toString() ); // true

// Object
var obj = {name: "张三", age: 18};
document.writeln( obj.toString() ); // [object Object]

// HTML DOM 节点
var eles = document.getElementsByTagName("body");
document.writeln( eles.toString() ); // [object NodeList]
document.writeln( eles[0].toString() ); // [object HTMLBodyElement]

typeof 操作符

typeof操作符返回一个字符串,表示未经求值的操作数(unevaluated operand)的类型。

类型

结构

Undefined

"undefined"

Null

"object" (见下方)

布尔值

"boolean"

数值

"number"

字符串

"string"

Symbol (ECMAScript 6 新增)

"symbol"

宿主对象(JS环境提供的，比如浏览器)

Implementation-dependent

函数对象 (implements [[Call]] in ECMA-262 terms)

"function"

任何其他对象

"object"

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof

Previous2016年4月12日 Next2016年4月15日

Last updated 5 years ago