angular 以ui-select为例 指令用法小记

在进行select框操作时，老师引入了ui-select，于是对ui-select进行学习
附上官网地址 UI Select
ui-select有非常多的样式，使用很方便

我们项目主要用到了bootstrap样式的
注意一点，ui-select是作为angular中的指令存在的，使用方法为指令用法

代码示例

.directive('yunzhiDistrict', ['districtService', function (districtService) {
    return {
        // 独立scope，使各个指令间不互相影响
        scope:{
            // 将指令中的district属性，双向绑定到scope.district
            ngModel:'='
        },
        /**略去controller中内容**/
        link: function postLink(scope) {
            // 监视区域是否发生变化。如果发生变化，则重置ngModel的值。此时，利用双向数据绑定。将值传回V层
            scope.$watch('district', function(newValue) {
                scope.ngModel = newValue.selected;
            }, true);
        }
    };
}]);

指令的最大特点就是具有单独的作用域，使用非常灵活，所以scope是非常重要的一个参数。
scope参数的作用是，隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。

ng-model:"="

将指令中的ng-model与使用指令的scope中ng-model双向绑定，而使用指令的scope.model又与select中V层model绑定，实现了数据交互
如下图所示

未完待补充。

参考博客AngularJS指令参数详解