# 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

```markup
<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 -->
```

也可以引入外部文件：

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

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

```javascript
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有交互。

![](/files/-LjTbBCjK55WITFh5cSx)

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

```markup
<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代码

```markup
<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()**&#x51FD;数返回指定对象的原始值。

|    对象    | 返回值                                    |
| :------: | -------------------------------------- |
|   Array  | 数组实例对象。                                |
|  Boolean | 布尔值。                                   |
|   Date   | 以毫秒数存储的时间值，从 UTC 1970 年 1 月 1 日午夜开始计算。 |
| Function | 函数本身。                                  |
|  Number  | 数字值。                                   |
|  Object  | 对象本身。这是默认设置。                           |
|  String  | 字符串值。                                  |

```javascript
// 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()**&#x51FD;数用于将当前对象以字符串的形式返回。

|     类型     | 行为描述                                                                                                  |
| :--------: | ----------------------------------------------------------------------------------------------------- |
|    Array   | 将 Array 的每个元素转换为字符串，并将它们依次连接起来，两个元素之间用英文逗号作为分隔符进行拼接。                                                  |
|   Boolean  | 如果布尔值是true，则返回"true"。否则返回"false"。                                                                     |
|    Date    | 返回日期的文本表示。                                                                                            |
|    Error   | 返回一个包含相关错误信息的字符串。                                                                                     |
|  Function  | 返回如下格式的字符串，其中 functionname 是一个函数的名称，此函数的 toString 方法被调用： "function functionname() { \[native code] }" |
|   Number   | 返回数值的字符串表示。还可返回以指定进制表示的字符串，请参考Number.toString()。                                                      |
|   String   | 返回 String 对象的值。                                                                                       |
| Object(默认) | 返回"\[object ObjectName]"，其中 ObjectName 是对象类型的名称。                                                      |

```javascript
//数组
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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://note.niefee.com/summary/4/2016-nian-4-yue-13-ri.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
