select相关的指令

概述

select指令实现的是下拉框的功能，一般会配合option指令以及ng-model指令使用。在select指令中常用的一些指令：

指令	说明
ng-model	绑定的数据
required，ng-required	指定是否为必须的，具体可以查看required指令相关内容
multiple	是否可以多选
ng-change	选择发生变化时的响应
ng-option	select的可选项

在option指令中，会把value属性或者textContent的值作为选中的值，优先使用value的值，optiong只会有string类型的值，如果不是string类型的值就无法正确处理。如果想要option绑定一个不是字符串格式的值就需要特殊处理一下。
当select绑定的数据无法在已有的option中找到时，就会自动添加一个对应的option，这个option显示的是空的，当数据变化后就会删除。

实现细节

在select指令中主要实现了上个部分：controller，prelink，postlink。
controller中主要实现了一些功能函数：

函数	说明
renderUnknownOption	创建一个未知option
updateUnknownOption	更新未知option
generateUnknownOptionValue	获取未知option的值
removeUnknownOption	删除未知option
selectEmptyOption	选择空option
unselectEmptyOption	去除空option的选择状态
readValue	读取选中的值，multiple会从写这个函数
writeValue	根据数据改变option选择状态，multiple会从写这个函数
addOption	添加option
removeOption	删除option
hasOption	判断option是否存在
registerOption	注册option

prelink中主要change事件的监听以及如果是multiple类型时从写readValue和writeValue方法。
postlink里主要做的事情是复写ng-model的controller的$render方法，这个方法在页面刷新时会被调用。

在option指令中，最主要的工作是把自己的信息注册到select中去，调用select controller的registerOption方法。

var selectCtrlName = '$selectController',
    parent = element.parent(),
    selectCtrl = parent.data(selectCtrlName) ||
    parent.parent().data(selectCtrlName); // in case we are in optgroup
if (selectCtrl) {
  selectCtrl.registerOption(scope, element, attr, interpolateValueFn, interpolateTextFn);
}

从代码可以看出option指令中会尝试获取父标签或父标签的父标签的controller，这个controller对应的就是select中的controller，所以option指令必须配合select指令或者实现了registerOption方法的指令使用。

样例代码

    



    

         Single select: 

        
            Option 1
            Option 2
        


         Single select with "not selected" option and dynamic option values: 

        
            ---Please select--- 
            Option 1 
            Option 2
        

        Force unknown option

        singleSelect = {{data.singleSelect}}

        

         Multiple select: 

        
            Option 1
            Option 2
            Option 3
        

        multipleSelect = {{data.multipleSelect}}